自定义iconfont

2017-10-16  本文已影响218人  冷洪林

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 中已经添加

使用我们自己定义的图标:

  1. 将fonts 下的IconFont.tff 文件挪到node_modules/react-native-vector-icons/Fonts 目录下
  2. 将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的格式

上一篇 下一篇

猜你喜欢

热点阅读