SVG 转 React / Vue JSX 组件转换器

为什么原生 SVG 不能直接粘贴进 React 代码中？

在 React 中，JSX 虽然语法看似 HTML，但本质上是 JavaScript 对象。React 的虚拟 DOM 解析器遵循严格的驼峰命名（camelCase）规则。原生 SVG 中含有大量中划线属性（例如 stroke-width、fill-rule），如果直接粘贴进组件，浏览器控制台会报出大量的无效 DOM 属性警告（Invalid DOM Property Warning）。

常见关键转换规则

• stroke-width ➡️ strokeWidth
• stroke-linecap ➡️ strokeLinecap
• fill-rule ➡️ fillRule
• class ➡️ className
• currentColor 颜色继承：将硬编码的 HEX 颜色替换为 currentColor 后，该图标即可自动跟随父级元素的文本颜色（例如配合 Tailwind CSS 的 text-red-500 随心变色）。