SVG → React
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
React 组件（.jsx）
组件名取自文件名，所以 arrow-left.svg 会变成 ArrowLeft。
TypeScript 组件（.tsx）
同一个组件，类型标注为 SVGProps<SVGSVGElement>。
JSX 片段
只有标记本身，适合粘进您已有的组件里。
OneImageTool
图片工具一站搞定 — 免费、无需上传
SVG → React
把任意 SVG 变成可直接粘贴的 JSX —— 属性按 React 的要求重命名，props 展开到根元素上，需要时还有 TypeScript 版。
或点击浏览 —— 仅限 SVG
组件名取自文件名，所以 arrow-left.svg 会变成 ArrowLeft。
同一个组件，类型标注为 SVGProps<SVGSVGElement>。
只有标记本身，适合粘进您已有的组件里。
把图标当组件用
JSX 看着像标记语言，本质却是 JavaScript。像 stroke-width 这样带连字符的属性不是合法标识符，class 撞上了保留字，内联 style 里的花括号又会被当成表达式。直接从设计工具里复制出来的 SVG，通常至少会因为其中一条而编译失败。
这个转换器只重命名非改不可的部分，其余原样保留。data- 和 aria- 属性保留连字符，因为 React 会原封不动地把它们传下去 —— 顺手改掉它们，是无声弄丢无障碍标签的常见方式。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
完整组件、它的 TypeScript 版本，或者纯 JSX。
像用任何组件那样 import，再用 props 控制样式。
快速解答
为了让您传进来的值优先生效。在 JSX 中后写的属性会覆盖先写的，所以展开放最后，您才能从外部设置 className、width 或 onClick。若放在最前面，文件里烙死的值反而会悄悄盖掉您的。
把输出里写死的 fill 或 stroke 换成 currentColor，再在任意父元素上用 CSS 设置颜色即可。如果颜色散落在很多个节点上，先用 SVG 换色工具过一遍 —— 它能一次性把它们全部换成 currentColor。
不能直接用。React Native 没有 DOM，那里的 SVG 需要 react-native-svg，元素名也要首字母大写，比如 Svg 和 Path。这里做的属性重命名思路仍然适用，但导入方式和标签不同。
那是源文件本身的样子 —— 压缩过的 SVG 仍是压缩的，因为重新排版是另一件事。先用 SVG 美化工具过一遍，组件就会带着可读的缩进出来。
不会。转换只是在您的浏览器里做的字符串处理。