ZeroTool Workbench
SVG 转 JSX 转换器
在浏览器中即时将 SVG 转换为 React JSX 组件，自动处理驼峰属性、className，支持 TypeScript、forwardRef 和 memo 包裹。免费无需注册。
使用方法
- 将 SVG 代码粘贴到左侧文本框。
- 输入组件名称（默认：
MyIcon），首字母会自动大写。 - 根据需要切换 TypeScript、forwardRef 或 memo 选项。
- JSX 组件输出会即时出现在右侧文本框。
- 点击复制将其复制到剪贴板。
属性转换规则
| SVG | JSX |
|---|---|
stroke-width | strokeWidth |
stroke-linecap | strokeLinecap |
fill-rule | fillRule |
clip-path | clipPath |
class | className |
font-size | fontSize |
text-anchor | textAnchor |
xmlns="..." | (已移除) |
输出模式
- 默认：无 TypeScript 注解的普通函数组件。
- TypeScript：添加
React.FC<React.SVGProps<SVGSVGElement>>类型，支持className、style、onClick等 prop。 - forwardRef：将组件包裹在
React.forwardRef中，向父组件暴露 SVG 元素的 ref。 - memo：将最终导出包裹在
React.memo中，跳过不必要的重新渲染。
常见使用场景
- 将 Figma 或 Illustrator 导出的 SVG 转换为 React 图标组件
- 将 SVG 图标库迁移到基于 JSX 的设计系统
- 让 SVG 图标接受
className、style等 React props - 构建通过展开 props 接受
aria-label的无障碍图标组件
FAQ
SVG 转 JSX 工具做什么？
它将原始 SVG 文件转换为可复用的 React 组件。主要变更包括：将连字符属性转为驼峰命名（stroke-width → strokeWidth）、将 class 重命名为 className、移除 xmlns 声明，并将 SVG 标记包裹在函数组件中。
为什么要重命名 SVG 属性？
JSX 会被编译为 JavaScript，连字符属性名不是合法的 JS 标识符。React 要求使用驼峰命名版本，如 strokeWidth、fillRule、clipPath 等。
TypeScript 选项有什么作用？
启用后，输出使用 React.FC<React.SVGProps<SVGSVGElement>> 作为组件类型，提供完整的 TypeScript 支持，包括 SVG 属性的自动补全。
forwardRef 有什么用？
forwardRef 允许父组件将 ref 附加到底层 SVG 元素，适用于需要以编程方式访问 DOM 节点的场景，例如测量尺寸或触发动画。
memo 包裹有什么作用？
React.memo 包裹组件，使其仅在 props 变化时才重新渲染，是图标组件的性能优化手段。
数据会发送到服务器吗？
不会。转换完全在浏览器中通过 JavaScript 运行，不传输任何 SVG 数据。