[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 Core 获取应用物理路径的常见问题
如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径. 但是在Asp.Net Cor ...
- 《JavaEE开发的颠覆者——Spring Boot实战》是一本好书
这本书的风格非常好.每一节都是先点明这一块知识的要点,随后就手把手的做出一个最简明.但有能体现核心的实例(大多只有几个Class) 这样的书用来熟悉一门框架,实在是再好不过.
- POST请求转换为PUT或者Delete请求、处理post请求乱码的过滤器、Get请求乱码
在web.xml中配置 <!--配置HiddenHttpMethodFilter : 将所有的POST请求转换为PUT或者Delete请求 --><filter> <fi ...
- Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all)
Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all) 一丶多对多查询 表建立多对多关系的方式 ...
- vs2017 添加 mysql EF实体数据模型闪退
1.查看vs2017安装路径找到Mysql.Data.dll版本号与MySQL Connector Net版本是否一致 历史版本下载地址 http://mysql.inspire.net.nz/Dow ...
- rest framework 之序列化
一.示例 restful work 的序列号就类似于 Django 的 Form 表单. 1.api/urls.py from django.urls import path, re_path fro ...
- webpack4.0报WARNING in configuration警告
在进行webpack打包工作时,先进行如下步骤 1). 安装webpack:推荐全局命令 cnpm install webpack -g 查看webpack版本 webpack -v 2) . 此时 ...
- js清除浏览器的缓存的方法
许多的项目当中,一旦改动了js的代码,必须在浏览器当中重新加载数据,清理缓存,比较麻烦.网上找了很多的清除浏览器的方法,首先是在 html的头部加上meta的属性,但是发现并没有什么用处,后来看到说在 ...
- 摘:Selenium api学习
selenium: selenium2(WebDriver) API1.1 下载selenium2.0的包 官方download包地址:http://code.google.com/p/seleniu ...
- 201671030106 何启芝 实验十四 团队项目评审&课程学习总结
项目 内容 这个作业属于哪个课程 >>2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 >>实验十四 团队项目评审&课程学习总结 课程学习目 ...