SVG 转 JSX
免费在线使用 SVG 转 JSX 无需安装即可使用工具
关于 SVG 转 JSX 转换器
将原始 SVG 标记转换为可直接粘贴的 React 组件。它会把 SVG 属性改写为 React 兼容的驼峰式 props（class 改为 className、stroke-width 改为 strokeWidth、xlink:href 改为 xlinkHref 等），把内联样式字符串转换为 React 样式对象，自动闭合空元素和 SVG 形状元素，并移除默认的 xmlns="http://www.w3.org/2000/svg" 命名空间。
使用方法
1. 将你的 SVG 标记（必须包含 <svg> 和 </svg>）粘贴到输入框 2. 点击 Prettify 在转换前自动缩进标记（可选） 3. 设置组件名称（默认为 SvgComponent，仅允许字母、数字和下划线） 4. 根据需要勾选 "use client" 指令和/或 useMemo 钩子 5. 点击 Convert 生成 JSX 组件并复制到剪贴板
组件输出选项
组件名称字段控制导出的标识符。勾选 "use client" 复选框后，输出会在单独一行以 "use client" 开头，并作为默认导出（无 props）；否则作为命名常量导出，接收 props 并返回 svg。启用 useMemo 后，SVG 标记会被包裹在 useMemo(() => (...), []) 中。输入必须同时包含 <svg 和 </svg>，否则会因 SVG 无效而被拒绝并报错。
▶哪些 SVG 属性会被自动转换？
常见情况包括 class 转 className、fill-opacity/stroke-opacity/stroke-width/stroke-linecap/stroke-linejoin/stroke-dasharray/stroke-dashoffset、clip-path/clip-rule、fill-rule、font-family/font-size/font-weight、letter-spacing/word-spacing、text-anchor、xml:space、xlink:href/xlink:title/xlink:role 以及 xmlns:xlink。其他任何短横线命名（kebab-case）的属性会回退到通用的驼峰式转换。
▶Prettify 有什么作用？
它会根据标签嵌套关系，使用缩进重新格式化输入框中的 SVG，使源码在转换前更易阅读。它不会影响最终生成的 JSX 输出。
▶为什么要移除 xmlns 属性？
仅默认的 xmlns="http://www.w3.org/2000/svg" 命名空间会被移除，因为 React 会自动注入它。其他 xmlns 声明会被保留。
▶可以生成 Next.js 客户端组件吗？
可以。勾选 "use client" 复选框后，输出将以 "use client" 指令开头，并将组件作为默认导出。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。