什么是SVG 转 JSX 转换器？
SVG 转 JSX 转换器将标准 SVG 标记转换为可直接用于 React 组件的 JSX 代码。转换规则：kebab-case 属性名转为 camelCase（stroke-width → strokeWidth、fill-rule → fillRule、clip-path → clipPath）；class 转为 className；for 转为 htmlFor；布尔属性（如 xmlns 不需要时）按 JSX 语法输出为 {true} 或省略；自动移除 XML 声明（<?xml ...?>）和 DOCTYPE。转换后的代码可直接粘贴到 React 组件中使用。所有转换在浏览器本地完成，SVG 内容不会上传。适用于 React 开发者、前端工程师和设计系统维护者。
▶使用场景5个场景
- ◆把设计稿导出的 SVG 转为 React 组件
- ◆将 icon 库 SVG 批量接入项目
- ◆学习 SVG 与 JSX 属性差异
- ◆重构 legacy SVG 代码为 JSX
- ◆为设计系统生成 React 图标组件
▶如何使用？4步
- 1将 SVG 代码粘贴到输入框
- 2点击"转换"按钮
- 3右侧查看转换后的 JSX 代码
- 4点击"复制"直接粘贴到 React 组件
▶功能特点8个特点
- ✓免费使用
- ✓无需注册
- ✓属性名自动转换
- ✓class→className 处理
- ✓布尔属性支持
- ✓移除 XML 声明/DOCTYPE
- ✓一键复制
- ✓纯本地转换
▶常见问题7个问题
SVG 转 JSX 转换器 是什么？
一款在线代码转换工具。输入：标准 SVG 标记。输出：可直接用于 React 组件的 JSX 代码。自动处理属性名转换（stroke-width→strokeWidth）、class→className、布尔属性，并移除 XML 声明。适用于 React 开发者将 SVG 图标/插图接入项目。转换在浏览器本地完成，内容不上传。
哪些属性会被转换？
所有 kebab-case 属性转为 camelCase，例如 stroke-width→strokeWidth、fill-rule→fillRule、clip-path→clipPath；class→className；for→htmlFor。
会处理布尔属性吗？
会。无值属性按 JSX 语法输出为 {true}，符合 React 的写法要求。
会删除哪些内容？
自动移除 XML 声明（<?xml ...?>）和 DOCTYPE，这些在 JSX 中会报错。
转换后的代码可以直接用吗？
可以。复制结果粘贴到 React 组件的 return 中即可，无需手动修改属性名。
我的 SVG 会被上传吗？
不会。所有转换都在浏览器本地完成，SVG 内容不会发送到任何服务器。
支持哪些 SVG 特性？
支持内联样式、渐变（defs/linearGradient/radialGradient）、路径、分组、蒙版等标准 SVG 元素。