SVG 转 JSX/React 转换器

在线将 SVG 转换为 JSX React 组件。将 SVG 属性转换为驼峰命名，可包装为 React 组件。免费即时转换。

Component:

Wrap as Component

SVG

JSX / React

关于 SVG 转 JSX

在 React 中使用 SVG 图标和图形需要将 SVG 属性转换为 JSX 兼容语法。SVG 使用短横线命名属性如 stroke-width、fill-opacity 和 clip-path，在 JSX 中必须变为驼峰命名：strokeWidth、fillOpacity、clipPath。本工具自动处理所有这些转换。它还可以将 SVG 包装在带有导出语句的 React 组件中。非常适合将设计工具中的 SVG 转换为可复用的 React 图标组件。

𝕏 Twitter in LinkedIn

评价此工具

4.8 / 5 · 55 人评价

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?

☕Buy Me a Coffee

使用方法

将 SVG 标记粘贴到输入面板
设置组件名称并切换包装选项
点击转换生成 JSX 兼容的 SVG
将结果复制到 React 组件文件中

常见用例

将 Figma 或 Illustrator 的 SVG 图标转换为 React 组件
构建可复用 React SVG 组件的图标库
将静态 HTML 中的 SVG 资源迁移到 React
优化 React 渲染的内联 SVG

常见问题

哪些 SVG 属性会被转换？

所有短横线命名的 SVG 属性都转为驼峰命名：stroke-width → strokeWidth，fill-opacity → fillOpacity，clip-path → clipPath 等 40 多个属性。

可以将 SVG 包装为 React 组件吗？

可以。启用“包装为组件”选项即可生成带有 export 的完整 React 组件。您可以自定义组件名称。

为什么在 React 中要移除 xmlns？

xmlns 属性仅在独立 SVG 文件中需要。在 JSX/React 中不需要，因为 SVG 嵌入在 HTML 中。移除它使代码更简洁。

是否处理内联样式？

是的。内联样式字符串转换为带有驼峰命名属性的 JavaScript 样式对象。