react-native-vector-icons是一个可以在react native项目使用免费的矢量图标,使用简单方便,它集成了市场主流开源的图标库,它支持图标集合有:
- AntDesign
- Entypo
- EvilIcons
- Feather
- FontAwesome
- FontAwesome 5
- Fontisto
- Foundation
- Ionicons
- MaterialIcons
- MaterialCommunityIcons
- Octicons
- Zocial
- SimpleLineIcons
安装
安装依赖:yarn add react-native-vector-icons
针对Aandroid和iOS,还需要额外的安装配置
Android:
在android/app/build.gradle添加:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
在android/settings.gradle添加:
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
在android/app/build.gradle的dependencies:
implementation project(':react-native-vector-icons')
iOS:
- 将node_modules/react-native-vector-icons的Fonts文件夹拖动到xcode工程目录(注意不是在xcode右击加入,而是拖进去),然后会提示是否:"Add to targets" and that "Create groups",拖拽进去后工程自动会弹出提示,是否add to targets 和create groups 记得要打钩。
- xcode项目会自动添加:
如果没有自动添加,点击info.plist按照上图这样添加
3.在xcode设置中,选中“Build Phases”,添加复制的Fonts文件夹
4.在根目录新建react-native.config.js:
module.exports = {
dependencies: {
'react-native-vector-icons': {
platforms: {
ios: null,
},
},
},
};
使用
在官网搜索图标:https://oblador.github.io/react-native-vector-icons/,复制选中图标的名称,
如果想要使用上面图标集合的某个图标,以ant design的caretup图标为例,在组件中导入图标:
import AntDesign from 'react-native-vector-icons/AntDesign';
{/*图标使用示例*/}
<AntDesign name="caretup" size={22} color="#000" />
把复制的图标名称粘贴到上面AntDesign的name属性里面