免费在线SVG转React JSX组件转换器，自动将SVG代码转换为React JSX格式，转换属性名（class→className、stroke-width→strokeWidth）、处理标签自闭合，支持TypeScript类型定义，一键复制转换结果。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用转换选项
转换结果 (React JSX)
💡 说明
1. 粘贴 SVG 代码到左侧输入框
2. 配置转换选项（TypeScript、尺寸/颜色 props）
3. 点击"转换为 JSX"自动转换
4. 自动处理属性名转换: class→className, stroke-width→strokeWidth, fill-rule→fillRule 等
5. 支持 TypeScript React.FC 类型定义（可选）
❓ 常见问题
SVG 转 JSX 做了哪些属性转换？
转换器自动处理以下属性名变化：class→className、stroke-width→strokeWidth、fill-rule→fillRule、clip-rule→clipRule、stroke-linecap→strokeLinecap、stroke-linejoin→strokeLinejoin、xmlns→无（自动移除）、style 对象化、自闭合标签等。所有 SVG 小写属性名转为 JSX 驼峰命名。
使用 size 和 color props 有什么好处？
勾选"支持 size 属性"后，生成的组件会接收 width/height 参数，默认为 24px。勾选"支持 color"后，组件通过 props 传递 stroke/fill 颜色值，方便在不同地方复用同一图标时调整尺寸和颜色，无需手动修改 JSX。
TypeScript 版本有什么区别？
勾选 TypeScript 后，生成的组件使用 React.FC<React.SVGProps<SVGSVGElement>> 类型定义，包含完整的类型检查和自动补全。同时会自动导出组件定义，支持在 .tsx 文件中直接使用。