轻松转换：SVG To JSX

将 SVG 标记转换为 React 函数组件：SVGO 先在浏览器中优化 SVG，再由 SVGR 在服务器上转换。属性改为 camelCase（stroke-width 变为 strokeWidth），数值尺寸变为数字，并在根 <svg> 上展开 {...props}。

把从 Figma 或 Illustrator 导出的图标变成 React 组件。

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. SVG to JSX code is converted on the server.

Original

Result

JSX

适用场景

把从 Figma 或 Illustrator 导出的图标变成 React 组件。
在把 SVGR 加入构建流程之前，查看 SVGR 会如何改写 SVG。

使用方法

粘贴 SVG 标记或加载 .svg 文件；不是有效 SVG 的输入会被拒绝并显示错误。
打开设置，可关闭 SVGO 优化，或切换 remove title、merge paths 等插件；编辑器下方的预览会对比原始 SVG 和优化后的 SVG。
复制组件并重命名 SvgComponent；通过 props 传入 className、width 或 fill。

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React 组件（JSX）

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

功能与限制

SVGO 在浏览器的 Web Worker 中运行；优化后的 SVG 随后会发送到本站的 /api/svg-to-jsx 接口，由 SVGR 生成组件。请勿粘贴机密图稿。

在默认设置下，注释、<title>、<desc> 和编辑器元数据会被移除，路径数据会被缩短（M5.000 12.000 L19.000 12.000 变为 M5 12h14）。关闭优化即可按粘贴内容原样转换。

style 字符串变为样式对象，class 变为 className。

输出面向 React DOM；如需 react-native-svg，请使用 SVG 转 React Native。

FAQ

为什么根元素保留了 width 和 height？

SVGO 设置中的 remove dimensions 默认关闭，且 SVGR 使用默认选项，因此尺寸会以数字形式保留（width={24}）。由于 {...props} 位于其后，可以通过 props 覆盖。

fill="currentColor" 能让我用 CSS 设置颜色吗？

能。currentColor 会被保留，因此图标会跟随父元素的 CSS color。路径中写死的颜色不会被替换。

为什么组件里没有 <title>？

SVGO 的 remove title 默认开启。如果出于无障碍需要 <title>，请在设置中关闭它，或完全关闭优化。

能输出 TypeScript 吗？

不能。本页输出不带类型注解的 JavaScript 组件。

规范与参考资料

SVGR documentation

SVG