为什么不能直接把 SVG 粘贴进 React？
把原始 SVG 粘贴进 .jsx 文件，通常会得到一大堆警告，比如 “Invalid DOM property stroke-width”、“Invalid DOM property class”；如果文件里有 style 属性或 XML 声明，甚至会直接编译失败。逐个手动改属性名既慢又容易出错，图标一多更是如此。
这个转换器会自动完成重命名，并把标记包装成可以接收 props 的组件。由于 {...props} 会展开到根 <svg> 上，父组件可以直接传入 className、aria-label、onClick 或自定义 width，而无需再修改图标本身。
React 图标的推荐设置
如果要做可复用的图标组件，我们建议：
- 开启 currentColor，让图标继承父元素的文字颜色，并自动适配深色模式。
- 开启 size 属性，用一个值（例如 size={20}）同时控制宽和高。
- 保留 viewBox，移除固定的 width 和 height，让图标可以随 CSS 缩放。
- 只有当父组件需要访问底层 <svg> 元素（例如用于提示框或动画）时，才使用 forwardRef。
内联组件还是图片文件？
内联 SVG 组件可以用 CSS 设置样式、做动画、在悬停时变色，而且不会产生额外的网络请求。对于体积大、内容固定的插画，普通的 <img src="/file.svg"> 可能更划算，因为浏览器可以单独缓存它。图标和界面图形适合做成组件，大型插画更适合用 img 标签。