react-native-vector-icons（IcoMoon）配置后显示错误图标如何解决？

以下是按优先级排列的排查修复步骤：

1. 补全createIconSetFromIcoMoon的必填参数 #

你当前的配置代码省略了第二个字体名参数，会导致框架无法匹配正确的字体文件：

• 打开你的selection.json文件，找到metadata下的fontFamily字段，复制对应的值
• 修改配置代码，传入字体名、字体文件名参数，示例如下：

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/customIcons/selection.json';

// 第二个参数为selection.json里的fontFamily值，第三个参数为你导出的ttf文件名
export default createIconSetFromIcoMoon(
  icoMoonConfig,
  'IcoMoon',
  'icomoon.ttf'
);

2. 确认ttf字体文件已正确配置到原生工程 #

react-native-vector-icons的自定义字体需要手动配置到原生端，仅导入json文件无效：

• 安卓端：将IcoMoon导出的.ttf文件放入android/app/src/main/assets/fonts目录，不存在fonts文件夹则手动新建
• iOS端：用Xcode打开iOS工程，将ttf文件拖入工程目录，勾选「Copy items if needed」和你的应用target，再在Info.plist的Fonts provided by application数组中添加该ttf文件的完整文件名

3. 检查调用的图标名是否匹配 #

打开selection.json的icons数组，确认你调用的pencil和对应图标条目的properties.name完全一致，注意大小写、拼写、是否有多余后缀（比如是否实际为pencil-edit）。

4. 清理缓存全量编译 #

修改原生配置后必须全量编译应用，不能仅靠JS热更新生效：

1. 停止当前Metro服务，执行npx react-native start --reset-cache重启
2. 安卓端可进入android目录执行./gradlew clean后再执行npx react-native run-android
3. iOS端可删除Xcode缓存后执行npx react-native run-ios

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