React Native 用 Vector Icons 图标不显示怎么办？

シ子皓提问于 2026-02-26 18:04:20 阅读 14

框架

我按照文档装了 react-native-vector-icons，也 link 了（用的是 RN 0.68），但图标死活不显示，只看到一个方框。试过重启 Metro 和重新 build，还是不行。

代码是这么写的：

import Icon from 'react-native-vector-icons/FontAwesome';

// 在组件里
<Icon name="rocket" size={30} color="#900" />

是不是还要手动配置什么？安卓和 iOS 都试了，都不行。

Redux

我来解答赞 3 收藏

反馈

2 条解答

迷人的志鸣 Lv1

这个问题我太熟了，不是你配置错了，是 RN 0.68 之后 link 不管用了，得手动加字体文件，尤其安卓这边坑最多。

先说安卓的：

1. 下载 FontAwesome 的 ttf 字体文件，比如 FontAwesome5_Brands-Regular-Web.ttf 这种，从 node_modules 里找，路径一般是 node_modules/react-native-vector-icons/Fonts

2. 把字体文件拷到 android/app/src/main/assets/fonts/ 目录，没这个目录就新建一个，注意是小写 fonts，别拼错了

3. 在 android/app/build.gradle 里的 apply from: "../../node_modules/react-native/react.gradle" 下面加一行：

project.ext.vectoricons = [

    iconFontNames: [ 'FontAwesome5_Brands-Regular-Web.ttf', 'FontAwesome5_Free-Regular-Web.ttf', 'FontAwesome5_Free-Solid-Web.ttf' ] // 按你实际用的字体名来

]



apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. 最后清一下缓存重 build：cd android && ./gradlew clean && cd .. && npx react-native run-android

iOS 倒是简单点：

1. 同样把字体文件拖进 Xcode 项目里（在 ios/YourProjectName 目录下），勾选 Copy items if needed 和 Add to targets

2. 在 Info.plist 里加个键值对：Fonts provided by application，类型是 Array，每一项就是字体文件名（带后缀）

3. 清 build folder 重跑：cmd + shift + k 或在 Xcode 里 Product > Clean Build Folder，然后重新 run

对了，别用 <Icon /> 这种老写法了，新版本推荐直接用 createIconSetFromFontello 或者 createIconSetFromIcoMoon 这些，不过你这问题应该不是写法问题，是字体没加载进去。

实在不行就先试试 npm install react-native-vector-icons@9.2.0，这个版本对 0.68 支持最稳，别用 10.x 的，坑比 9.x 多。

2026-02-27 13:08

Tr° 文雯 Lv1

当时我也卡在这，RN 0.68 其实已经不推荐用 react-native link 了，尤其是 Vector Icons 这种需要手动拷贝字体文件的库，link 基本就废了一半。

先确认下你是不是用的 React Native 0.60+，如果是的话，必须手动配置字体文件，特别是 Android。

Android 的话，先在 android/app/src/main/assets/fonts/ 目录下创建一个空文件夹（如果不存在的话），然后把 node_modules/react-native-vector-icons/Fonts 下的所有字体文件复制进去，注意是全部复制，别漏。

然后在 android/app/build.gradle 的 android 节点里加一句：

project.ext.vectoricons = [

    iconFontNames: [ 'FontAwesome.ttf', 'MaterialIcons.ttf', 'MaterialCommunityIcons.ttf', 'Ionicons.ttf', 'EvilIcons.ttf' ] // 按你实际用到的来，别全加也行，但至少把你用的加进去

]



apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

iOS 的话，打开 ios/YourApp.xcworkspace，拖 node_modules/react-native-vector-icons/Fonts 里的对应 .ttf 文件进去（记得勾选 “Copy items if needed” 和 “Add to targets”），然后在 Info.plist 里加 Fonts provided by application 键，把文件名（带 .ttf 后缀）加进去。

最后别忘了 clean 一下构建缓存：

cd android && ./gradlew clean && cd .. && npx react-native run-android

或者 iOS 用 Xcode clean build folder 再重跑。

如果还是不显示，大概率是字体名写错了，比如 FontAwesome 里有些图标其实是 fa-rocket，你得查下官方的 icon 名字是不是真的叫 rocket，我之前就踩过这个坑，名字对不上，方框是常态。

2026-02-26 18:08