SVG 转 JSX 转换器
将原始 SVG 标记转换为 React JSX，把属性改为驼峰式、自动闭合空标签，并可选择包裹成带类型的组件。
正在加载工具…
SVG 转 JSX 转换器 — 粘贴 SVG 标记，立即得到可用于 React 的 JSX：stroke-width、fill-rule 等属性会改为驼峰式，class 变成 className，空元素会自动自闭合，还可以选择把结果包裹成一个会展开 SVGProps 的函数组件，从而接收任意属性。整个过程是纯字符串转换，完全在你的浏览器中运行，标记绝不会离开页面或发送到服务器。
SVG 转 JSX 转换器 是什么？
SVG 转 JSX 转换器是一款免费的浏览器内工具，可将普通 SVG 标记转换为可直接放进组件的有效 React JSX。React 要求 DOM 属性使用驼峰式（strokeWidth、clipPath、fillRule）并用 className 代替 class，因此手动粘贴的 SVG 在清理之前通常会产生警告——本工具会自动完成清理。前端开发者和设计师在从 Figma、Illustrator 或图标库导出图标并将其转为可复用 React 组件时会用到它。打开“包裹为组件”可生成具名函数组件，打开“TypeScript 属性”则用 React.SVGProps 为其添加类型，使其转发 width、height、className 和事件处理器。
如何使用 SVG 转 JSX 转换器
- 把你的 SVG 标记粘贴或输入到顶部的“SVG 输入”框中。
- 在下方的输出框查看转换后的 JSX——属性已改为驼峰式，class 变为 className，空标签也自动自闭合。
- 打开“设置”并启用“包裹为组件”，即可生成可复用的 React 函数组件而非裸 JSX。
- 在“组件名称”字段中设置包裹时使用的名称（例如 MyIcon）。
- 启用“TypeScript 属性”以展开带类型的 React.SVGProps，让组件接收 width、className 等属性。
- 点击复制以复制 JSX，然后粘贴到你的 React 或 Next.js 项目中。
示例
由简单图标生成内联 JSX
输入
<svg viewBox="0 0 24 24"><path stroke-width="2" class="icon" d="M4 12h16"></path></svg>
输出
<svg viewBox="0 0 24 24"><path strokeWidth="2" className="icon" d="M4 12h16" /></svg>
带类型属性的包裹组件
输入
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>
输出
export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" {...props}><circle cx="12" cy="12" r="10" /></svg>
);
}常见问题
- 转换器会改动我的 SVG 中的哪些内容？
- 它会把带连字符和命名空间的属性改成 React 的驼峰式（stroke-width 变 strokeWidth，fill-rule 变 fillRule，xlink:href 变 xlinkHref），把 class 属性改成 className，并对 path、rect 等空元素进行自闭合，使其成为有效的 JSX。
- 组件和 TypeScript 选项是怎么工作的？
- 关闭“包裹为组件”时，你会得到可放在任意位置的内联 JSX。打开它会用你输入的组件名称把 SVG 包裹成具名函数组件。启用“TypeScript 属性”后，会用 React.SVGProps 为该组件添加类型并展开 {...props}，从而转发 width、height、className 和事件处理器。
- 它能处理内联样式吗？
- 普通属性会被转换，但字符串形式的 style 属性不会被改写成 JSX 样式对象——React 期望 style 是一个由驼峰式属性组成的对象，因此粘贴后请检查任何内联 style。本工具专注于属性名、自闭合和可选的组件包裹。
- 如果我的 SVG 无效会怎样？
- 如果输入无法被解析为 SVG 或 XML，则会显示错误信息而非输出。请确保标记只有一个根元素且标签成对闭合，随着你的输入 JSX 会重新出现。
- 我的 SVG 会被上传到任何地方吗？
- 不会。转换是一种完全在你浏览器中运行的纯字符串处理，因此你的 SVG 标记绝不会发送到服务器，本工具也可离线使用。