输入 SVG 代码

SVG 大小: 0 字符

转换选项

生成 TypeScript 类型 (React.FC) 支持 size 属性 (通过 props 控制尺寸) 支持 color 属性 (通过 props 控制颜色) 组件名称:

转换结果 (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 文件中直接使用。

🔄 SVG 转 React JSX