01
1. 为何要将 SVG 转为 JSX
React(JSX)的语法与 HTML/SVG 略有不同。带连字符的属性(stroke-width)必须写成 camelCase(strokeWidth),class 要写成 className,而 style 必须是 JavaScript 对象而非字符串。本工具会自动转换这些差异,使设计师导出的 SVG 图标可以直接粘贴到 React 组件中。
⚛️ SVG 转 React JSX 转换器
粘贴 SVG 标记,即可将其转换为可直接用于 React 组件的 JSX。它会将属性转为 camelCase(class→className),把 style 字符串转为对象,并去除注释和 DOCTYPE。
更多开发者工具
了解更多
02
2. 转换规则
它将 class→className、for→htmlFor 进行映射,把 stroke-width、fill-opacity 之类的连字符属性转为 camelCase,把 xlink:href 等带命名空间的属性转为 xlinkHref,并保留 data-/aria- 属性不变。style="fill:red;stroke-linecap:round" 会变成对象 style={{ fill: 'red', strokeLinecap: 'round' }},同时去除注释、DOCTYPE 和 XML 声明。
03
3. 基于 DOMParser 的安全转换
本工具不使用正则,而是用浏览器的 DOMParser 真正解析 SVG 后再重新序列化,因此能正确处理嵌套结构和属性。所有处理都在浏览器中完成,代码不会发送到服务器。将结果放入组件后,可按需调整,例如把 width/height 提取为 props,或将 fill 改为 "currentColor"。
常见问题
可以直接在 React 中使用转换结果吗?
可以。将输出的 JSX 粘贴到组件的 return 中即可。也可将尺寸和颜色提取为 props 以提升复用性。
style 字符串也会被转换吗?
会。像 style="a:b;c:d" 这样的字符串会转换为对象 style={{ a: 'b', c: 'd' }},并将 CSS 属性名转为 camelCase。
我输入的 SVG 会发送到服务器吗?
不会。转换完全在浏览器中进行,代码不会发送到服务器。
它使用 svgr 之类的库吗?
不使用。它直接用浏览器内置的 DOMParser 实现,没有任何外部库。