npm install react-native-vector-icons --save
npm install rnpm -g
rnpm link
ios平台:
1.右击项目 Add files to "NameOfYourProject" 如:Add files to "chaoge"
2.选择node_modules/react-native-vector-icons/Fonts 目录或该目录下的某一个字体(项目中用到的字体)
Android平台: 具体的参见: https://github.com/oblador/react-native-vector-icons#option-manually
1.android/settings.gradle 中已经设置
2.android/app/build.gradle 中已经添加
使用我们自己定义的图标:
- 将fonts 下的IconFont.tff 文件挪到node_modules/react-native-vector-icons/Fonts 目录下
- 将fonts 下的IconFont.js文件挪到node_modules/react-native-vector-icons 目录下
3.使用:
import Icon from 'react-native-vector-icons/IconFont';
<Icon name={'fanhui'} color={'red'} size={20}></Icon>
附:IconFont.js 生成命令:
npm install iconfont-map-builder -g
iconmap -f iconfont.css -p '^.icon-([a-z0-9-]+?):before$'
其中 iconfont.css 是css文件名
后面的icon- 是css样式中前缀名称 如:.icon-fanhui:before { content: "\e624"; }
生成的js文件中需要前面的map 部分,后面的格式需要修改
格式参照fonts目录下的IconFont.js的格式
