如何为React Native项目添加自定义SVG图标（使用react-native-vector-icons）

步骤1：将SVG转换为可用的字体文件 #

• 用IcoMoon等工具把你的SVG图标打包成TrueType字体（.ttf），同时导出包含图标名称与对应Unicode码点的selection.json映射文件。注意给每个新图标分配未被IonIcons占用的Unicode码点（可查看IonIcons官方glyphmap.json确认已用范围）。
• 导出时确保字体名称统一，比如命名为CustomIonicIcons。

步骤2：配置项目字体资源 #

• 在项目根目录创建assets/fonts文件夹，将生成的.ttf文件放入其中。
• 新建或编辑react-native.config.js，添加字体资源配置：

module.exports = {
  assets: ['./assets/fonts/'],
};

• 运行npx react-native link确保字体被正确链接到iOS/Android项目（Expo项目需在app.json的assets数组中添加字体路径，再执行expo install expo-font）。

步骤3：创建自定义图标组件 #

在项目中新建components/CustomIcon.js，编写如下代码：

import React from 'react';
import Icon from 'react-native-vector-icons/Icon';
import customGlyphMap from '../path/to/selection.json'; // 替换为你的映射文件路径

const CustomIcon = (props) => {
  return (
    <Icon
      {...props}
      glyphMap={customGlyphMap}
      family="CustomIonicIcons" // 与你的字体文件名一致
    />
  );
};

export default CustomIcon;

步骤4：在项目中使用自定义图标 #

和使用IonIcons一样直接调用：

import CustomIcon from './components/CustomIcon';

// 组件内使用示例
<CustomIcon name="repeat-one" size={24} color="#333" />
<CustomIcon name="repeat-queue" size={24} color="#333" />

常见问题排查 #

• 确保字体文件名与代码中family参数完全一致（区分大小写）。
• iOS端检查Info.plist的UIAppFonts数组是否包含你的.ttf文件名；Android端确认android/app/src/main/assets/fonts目录下存在该字体文件。
• 若图标不显示，检查Unicode码点是否与现有图标冲突，或重新执行字体链接操作。

内容的提问来源于stack exchange，提问作者Natrome tex