[RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont
文接上文:
React Native 使用精美图标库react-native-vector-icons
本文主要讲述 如何 使用 阿里巴巴 矢量图标库 iconfont
一、找字体文件
访问 iconfont 官网 https://www.iconfont.cn
下载对应的图标库
笔者推荐几个本人较喜欢的库:
飞猪官方icon https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=599
聚划算官方图标库 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=1584
商家产品图标库 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=19
Alibaba国际站图标库 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=31
二、下载文件
点击下载至本地并解压缩,里面包含所有的字体文件。找到 iconfont.ttf,这是需要的文件
三、文件转化
这是本使用中较难的步骤,笔者步骤是这样
1)下载 iconfont
工具生成json文件
npm i iconfont-to-json -g
2)利用 react-native-vector-icons\bin 下的 generate-flow.js 生成 Iconfont.js.flow
和自己 手动复制 编辑出来的 Iconfont.js
为了节省大家在上面两步花费的时间,笔者将我的最终文件开放出来给大家下载
将上面的文件 下载解压,然后复制到 node_modules
\ 覆盖合并
3)配置iconfont.ttf
IOS: 把iconfont.ttf拖入Xcode,然后跟项目关联
Android: 把iconfont.ttf
放在 \android\app\src\main\assets\fonts
四、代码使用:
import Iconfont from 'react-native-vector-icons/Iconfont'; ..... <Iconfont name='icon-shoucang' size={} style={styles.leftIcon}/> <Iconfont name='icon-jinrujiantou' size={} style={styles.rightIcon}/>
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10861606.html
转载请著名出处!谢谢~~
[RN] React Native 使用 阿里巴巴 矢量图标库 iconfont的更多相关文章
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- 阿里巴巴矢量图标库(iconfont)批量全选的方法
阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配
前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...
- [RN] React Native 图片懒加载库 animated-lazy-image
React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...
- 超棒的阿里巴巴矢量图标库——支持IE6
Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图 ...
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...
随机推荐
- NET 实例化泛形对象并赋值
1.泛形方法:具体实例点击查看BuilderResultList /// <summary> /// 实例化泛形对象并赋值 /// </summary> /// <typ ...
- ABP 执行sql语句
由于业务繁琐,用EF比较麻烦,需要用到sql语句,然后网上找了很久,找到的例子都是老版本的,新版本有先声明已经去掉,不能用了 在这里做个小记 首先注入实例 private readonly IDbCo ...
- 2019 竞网智赢java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.竞网智赢等公司offer,岗位是Java后端开发,因为发展原因最终选择去了竞网智赢,入职一年时间了,也成为了面 ...
- Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传
Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV 在Django中存 ...
- JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)
JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM B ...
- 7.JavaScript-Promise的并行和串行
Promise 并行 Promise.all是所有的Promise执行完毕后(reject|resolve)返回一个Promise对象. 最近在开发一个项目中,需要等接口拿到全部数据后刷新页面,取消l ...
- 剑指前端(前端入门笔记系列)——DOM(元素节点)
DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查 增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 如何使用Python的Django框架创建自己的网站
如何使用Python的Django框架创建自己的网站 Django建站主要分四步:1.创建Django项目,2.将网页模板移植到Django项目中,3.数据交互,4.数据库 1创建Django项目 本 ...
- Android-----spinner组件使用(实现下单)
list view组件和spinner组件使用方法类似,从string.xml中通过entries获取数据显示.但如果要显示的列表项无法在执行前确定,或是要在程序执行的过程中变更选项内容,通过entr ...