SVG 转 JSX 转换器
将 SVG 转换为 React JSX：属性改为驼峰式，内联 style 变为样式对象，并可输出为内联 JSX、memo 或 forwardRef 组件。
正在加载工具…
SVG 转 JSX 转换器 — 粘贴 SVG 标记或拖入 .svg 文件，立即得到可用于 React 的 JSX：stroke-width 等属性改为驼峰式，class 变成 className，内联 style 字符串会被改写为 JSX 样式对象，空元素会自闭合。你还可以先运行 SVGO 式清理，然后输出内联 JSX，或输出会展开 SVGProps 的函数、memo 或 forwardRef 组件。整个过程是纯字符串转换，完全在你的浏览器中运行，标记绝不会离开页面或发送到服务器。
SVG 转 JSX 转换器 是什么？
SVG 转 JSX 转换器是一款免费的浏览器内工具，可将普通 SVG 标记转换为可直接放进组件的有效 React JSX。React 要求 DOM 属性使用驼峰式（strokeWidth、clipPath、fillRule），用 className 代替 class，并要求 style 属性是驼峰式属性组成的对象而非字符串——本工具会自动修正这一切。前端开发者和设计师在从 Figma、Illustrator 或图标库导出图标时会用到它。打开可选的清理可去除注释、编辑器元数据和 XML 声明，并可选择输出是内联 JSX，还是用 React.SVGProps 类型化的函数、memo() 或 forwardRef 组件。
如何使用 SVG 转 JSX 转换器
- 把你的 SVG 标记粘贴到输入框，或把 .svg 文件拖到拖放区。
- 在下方输出框查看转换后的 JSX——属性已改为驼峰式，class 变为 className，内联 style 变为样式对象，空标签也自动自闭合。
- 打开“设置”并选择“组件输出”：内联 JSX、函数组件、memo() 组件或 forwardRef 组件。
- 在“组件名称”字段设置包裹时使用的名称（例如 MyIcon）。
- 启用“TypeScript 属性”以用 React.SVGProps 为组件添加类型，或打开“清理 SVG”先去除注释和编辑器元数据。
- 点击复制以复制 JSX，然后粘贴到你的 React 或 Next.js 项目中。
示例
内联样式与属性一并转换
输入
<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>
输出
<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>带类型属性的 forwardRef 组件
输入
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
输出
export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
return (
<svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
);
});常见问题
- 转换器会改动我的 SVG 中的哪些内容？
- 它会把带连字符和命名空间的属性改成 React 的驼峰式（stroke-width 变 strokeWidth，xlink:href 变 xlinkHref），把 class 改成 className，把内联 style 字符串改写为键为驼峰式的 JSX 样式对象，并对 path、rect 等空元素进行自闭合，使其成为有效的 JSX。
- 组件输出选项是怎么工作的？
- 选择内联 JSX 可把标记放在任意位置，或用你输入的组件名称将其包裹为函数、memo() 或 forwardRef 组件。forwardRef 组件会接收一个 ref，并挂到根 svg 上。启用“TypeScript 属性”可用 React.SVGProps 为任意包裹组件添加类型并展开 {...props}。
- 它会转换内联样式吗？
- 会。style="fill:red;stroke-width:2" 这样的属性会被改写为 style={{ fill: "red", strokeWidth: "2" }} 这样的 JSX 样式对象，属性名改为驼峰式，值保留为字符串。CSS 自定义属性（--var）会作为字符串键保留。
- SVGO 式清理会做什么？
- 打开“清理 SVG”后，工具会去除 XML 声明、DOCTYPE、注释、<metadata>、inkscape: 与 sodipodi: 等编辑器命名空间以及 svg 的 version 属性，然后合并空白——全部在 JSX 转换之前完成。
- 我的 SVG 会被上传到任何地方吗？
- 不会。拖入文件或粘贴标记都是完全在你浏览器中运行的纯字符串处理，因此你的 SVG 绝不会发送到服务器，本工具也可离线使用。