美文网首页
自定义iconfont

自定义iconfont

作者: 冷洪林 | 来源:发表于2017-10-16 16:51 被阅读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的格式

相关文章

  • 使用iconfont学习笔记

    一、自定义iconfont的使用 iconfont解读 使用iconfont代替传统的图标有什么好处,以及相关的用...

  • ReactNative使用iconfont

    使用自定义图标 1. 下载iconfont图标文件 在iconfont官网[https://www.iconfon...

  • Ionic2 使用自定义图标

    在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标)。先在http://www.iconfont...

  • vue图标使用

    iconfont网址:Iconfont-阿里巴巴矢量图标库 1、Ant建议:当做svg使用 Ant提供了自定义fo...

  • element添加自定义icon

    1.添加的自定义icon 来自iconfont 2. 3.前缀改成 饿了么的统一前缀 4.下载iconfont项目...

  • React-Native solution

    持续更新中...... React-Native使用自定义字体文件iconfont *.ttf 参考:React...

  • 2018-03-29 MUI 在manifest.json中自定

    环境: iMac, Hbuilder, iconfont网站,iPhone真机 参考文章: mui如何增加自定义i...

  • Android使用IconFont矢量图标库

    iconfont矢量图标库又叫字体库 如何使用 一、使用自定义view 1.自定义view继承TextView,在...

  • 自定义iconfont

    npm install react-native-vector-icons --savenpm install r...

  • 百度小程序的一些坑

    1、自定义组件名不能用驼峰命名正确: 错误: 2、自定义组件内不支持iconfont,编译时将/去掉了 官方回复...

网友评论

      本文标题:自定义iconfont

      本文链接:https://www.haomeiwen.com/subject/snfluxtx.html