SVG转JSX转换器

什么是SVG转JSX转换器？

如何使用SVG转JSX转换器

1. 1

   粘贴 SVG 代码：找到你需要转换的完整 SVG 源码，全选复制后，直接粘贴到页面左侧的输入编辑框内，注意不要只保留片段内容，要保证SVG结构完整

2. 2

   设置输出选项：根据自己项目的需求，勾选页面上『开启 TypeScript』和『包裹 React Memo』对应的复选框，不需要对应功能取消勾选即可

3. 3

   获取转换结果：完成选项设置后，页面右侧会自动实时生成转换完成的可直接使用的JSX组件代码，不需要额外点击转换按钮

4. 4

   复制代码使用：点击结果区域上方的『复制代码』按钮，提示复制成功后，直接将代码粘贴到你项目对应的文件中即可使用

什么场景会用到？

计算示例

注意事项

• SVG的原生连字符属性（如stroke-width、fill-opacity）会自动转为JSX要求的驼峰格式（strokeWidth、fillOpacity），无需手动修改。
• 仅支持纯SVG代码转换，如果输入包含HTML嵌套或外部资源引用，转换后可能无法正常渲染。
• 转换结果默认导出组件，若你需要内联使用，只需复制组件return中的内容即可。
• 带xlink:href这类带命名空间的属性会保留原始格式，符合React JSX的属性要求，不会被错误转驼峰。

常见问题

参考资料

• React 官方文档 JSX 深入
• MDN Web Docs SVG 属性命名规范相关文档

本工具遵循React JSX的官方属性转换规则，所有示例均经过程序实际复算验证，结果符合主流React项目开发规范，由工具集编辑组维护更新。