这个 SVG 转换器能做什么
从 Figma、Illustrator、Sketch 或 Inkscape 导出的 SVG 是合法的 XML，却不是合法的 JSX。React 要求使用驼峰式属性（例如用 strokeWidth 代替 stroke-width）、用 className 代替 class，并且 style 必须是对象而不是 CSS 字符串。设计工具还会附带 XML 声明、注释、元数据块和带命名空间的属性，这些内容既会增大打包体积，也会引发警告。
SvgJsx 使用一个小巧的 XML 解析器读取 SVG，把每个属性改写成目标框架需要的形式，再输出格式整齐的组件代码。你可以选择 TypeScript 类型、size 属性、currentColor 填充、forwardRef、memo 以及导出方式，然后复制代码或直接下载文件。
如何把 SVG 转换成 React 组件
整个流程只需几秒钟：
- 把 SVG 代码粘贴到输入框，或将一个或多个 .svg 文件拖放到输入框上。
- 选择输出格式：React、React Native、Vue、Solid 或纯 JSX 片段。
- 设置组件名称，并按需开启 TypeScript、currentColor、size 属性等选项。
- 查看实时预览和体积对比，然后复制代码或下载文件。多个文件会被打包成一个 ZIP。
自动完成的转换
带连字符的属性会变成驼峰式（stroke-linecap → strokeLinecap），带命名空间的属性会被展平（xlink:href → xlinkHref），内联 style 字符串会变成 JavaScript 对象。data-* 和 aria-* 属性保持不变，因为 React 原样支持它们。script 元素和内联事件处理器会被移除，确保粘贴进来的文件无法把代码偷偷带进你的应用。
轻量优化会压缩空白字符，还可以把坐标统一保留到指定的小数位数。对大多数图标集来说，这能减少 20%–40% 的代码量，而且不需要引入笨重的 SVGO 依赖。