npm install react-native-vector-icons --save
npm install rnpm -g
rnpm link
ios平臺(tái):
1.右擊項(xiàng)目 Add files to "NameOfYourProject" 如:Add files to "chaoge"
2.選擇node_modules/react-native-vector-icons/Fonts 目錄或該目錄下的某一個(gè)字體(項(xiàng)目中用到的字體)
Android平臺(tái): 具體的參見: https://github.com/oblador/react-native-vector-icons#option-manually
1.android/settings.gradle 中已經(jīng)設(shè)置
2.android/app/build.gradle 中已經(jīng)添加
使用我們自己定義的圖標(biāo):
- 將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的格式
