SVG 转 React 转换器

在线将 SVG 转换为 React JSX

粘贴 SVG，实时预览渲染效果，并复制可用于 React 项目的 JSX 组件，无需把标记上传到服务器。

转换 SVG 为 React此页面默认打开 React 输出面板。

将设计工具导出的图标变成可复用的 React 组件。

在放入组件库之前检查 SVG 属性和渲染结果。

一边保留原始 SVG 源码，一边复制 JSX 结果做对照。

SVG Code

XML

React JSX

SVG Code

XML

预览会移除脚本和内联事件属性，并在沙盒中渲染 SVG。

在编辑器中粘贴或修改 SVG 代码。

查看实时预览，确认图形仍然正确渲染。

打开 React 输出，复制 JSX 组件并粘贴到项目中。

适配 JSX 的属性

SVG 属性会转换为更符合 React JSX 的写法，例如 className 和驼峰形式的 SVG 属性。

转换在浏览器中完成。SVG 草稿保存在本地，可随时从浏览器数据中清除。

编辑器旁边保留渲染预览，方便发现缺失 viewBox、颜色异常或路径不可见等问题。

可以。React 面板会基于当前 SVG 输出组件封装。提交前建议检查一次，尤其是原始 SVG 使用了不常见命名空间属性时。

这个页面把预览、组件结构和 JSX 属性转换放在同一个浏览器工作区里，检查和复制都更顺。

不会。编辑、预览、转换、复制和下载都在你的浏览器本地完成。