什么是SVG 转 React 组件？
SVG 转 React 工具把图标源码改写成函数组件：短横线属性转驼峰、xmlns 移除、props 透传到根节点，可选择输出 TypeScript 或 JavaScript 版本。转换在浏览器本地完成。
怎么用SVG 转 React 组件？
- 1粘贴 SVG 源码。
- 2填写组件名（会自动转成大驼峰）。
- 3选择是否输出 TypeScript 类型标注。
- 4复制到项目的图标目录中。
常见问题
为什么要把 props 透传到 svg 根节点？+
这样使用方才能控制尺寸、颜色与无障碍属性，例如 <PlusIcon width={20} aria-hidden />。把 stroke 设为 currentColor 再配合父级文字色，一个组件就能适配所有配色。
批量转换图标应该怎么做？+
项目里图标数量多时应使用 SVGR 的构建插件，在构建阶段自动把 .svg 导入为组件，既省去手工步骤也避免图标文件与组件不同步。本工具适合零星补充单个图标。
相关工具
全部工具JSON 转 YAML
JSON to YAML Converter
把 JSON 转成 YAML，保留嵌套层级
YAML 转 JSON
YAML to JSON Converter
把 YAML 转成 JSON，支持多文档
JSON 转 CSV
JSON to CSV Converter
JSON 对象数组转 CSV，嵌套字段自动扁平化
CSV 转 JSON
CSV to JSON Converter
CSV 转 JSON，自动识别表头与分隔符
JSON 转 TypeScript 类型
JSON to TypeScript
从 JSON 推导 TypeScript 类型定义
JSON 转 Go 结构体
JSON to Go Struct
JSON 转 Go 结构体，自动补 json tag