React开发中字形SVG图片转代码的常用生成工具咨询

你需求的这类可渲染字形的SVG，以及转换为React可用代码的常用工具主要分为两类：

一、字形SVG制作工具 #

• 专业矢量设计软件：Figma、Adobe Illustrator是最常用的选项，你可以直接在软件内绘制自定义字形，导出时选择SVG格式，就能直接拿到你示例中包含<path>、<polygon>标签的原生SVG代码，路径、填充色等参数都和你设计的效果完全一致。
• 字体类生成工具：如果需要批量制作整套统一风格的字形，可以使用Glyphs、FontForge这类字体设计工具，可直接将单个字符导出为独立的SVG文件，路径精度高且冗余代码少。
• 在线生成工具：如果不需要自定义设计，仅需要生成固定样式的字母/文字SVG，可使用在线SVG字形生成工具，输入对应字符、选择样式后即可直接导出SVG代码，无需手动调整路径。

二、SVG转React可用代码工具 #

原生SVG的部分属性命名不符合React JSX的语法规范，直接复制到React项目中可能出现报错，常用转换工具如下：

• 本地批量转换工具：SVGR是目前行业内通用的转换工具，可作为项目依赖安装后，通过命令行批量转换整个文件夹的SVG文件为标准React组件，转换后的组件可直接导入项目使用，还支持自定义配置规则，比如去除冗余代码、设置填充色可继承父级属性等。
• 在线转换工具：临时使用时可以选择在线SVG转JSX工具，将原生SVG代码粘贴进去就能一键生成符合React规范的JSX代码，无需安装任何依赖。

小提示：你提供的示例代码只需做简单调整即可直接在React中使用：将所有短横线分隔的属性名改为驼峰命名（例如stroke-width改为strokeWidth），放入<svg>根标签内即可正常渲染。如果需要封装为可复用组件，还可以将fill、width等属性改为接收props传入的动态值。

内容的提问来源于stack exchange，提问作者fakewars 93