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

为了节省大家在上面两步花费的时间,笔者将我的最终文件开放出来给大家下载

react-native-vector-icons

将上面的文件 下载解压,然后复制到 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的更多相关文章

  1. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  2. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  3. 阿里巴巴矢量图标库(iconfont)批量全选的方法

    阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...

  4. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  5. 阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配

    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...

  6. [RN] React Native 图片懒加载库 animated-lazy-image

    React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...

  7. 超棒的阿里巴巴矢量图标库——支持IE6

    Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图 ...

  8. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  9. 微信小程序本地引用iconfont(阿里巴巴矢量图标库)

    好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...

随机推荐

  1. .Net Core 获取应用物理路径的常见问题

    如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径. 但是在Asp.Net Cor ...

  2. 《JavaEE开发的颠覆者——Spring Boot实战》是一本好书

    这本书的风格非常好.每一节都是先点明这一块知识的要点,随后就手把手的做出一个最简明.但有能体现核心的实例(大多只有几个Class) 这样的书用来熟悉一门框架,实在是再好不过.

  3. POST请求转换为PUT或者Delete请求、处理post请求乱码的过滤器、Get请求乱码

    在web.xml中配置 <!--配置HiddenHttpMethodFilter : 将所有的POST请求转换为PUT或者Delete请求 --><filter> <fi ...

  4. Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all)

    Django---图书管理系统,多对多(ManyToMany),request获取多个值getlist(),反查(被关联的对象.author_set.all) 一丶多对多查询 表建立多对多关系的方式 ...

  5. vs2017 添加 mysql EF实体数据模型闪退

    1.查看vs2017安装路径找到Mysql.Data.dll版本号与MySQL Connector Net版本是否一致 历史版本下载地址 http://mysql.inspire.net.nz/Dow ...

  6. rest framework 之序列化

    一.示例 restful work 的序列号就类似于 Django 的 Form 表单. 1.api/urls.py from django.urls import path, re_path fro ...

  7. webpack4.0报WARNING in configuration警告

    在进行webpack打包工作时,先进行如下步骤 1). 安装webpack:推荐全局命令  cnpm install webpack -g 查看webpack版本 webpack -v 2) . 此时 ...

  8. js清除浏览器的缓存的方法

    许多的项目当中,一旦改动了js的代码,必须在浏览器当中重新加载数据,清理缓存,比较麻烦.网上找了很多的清除浏览器的方法,首先是在 html的头部加上meta的属性,但是发现并没有什么用处,后来看到说在 ...

  9. 摘:Selenium api学习

    selenium: selenium2(WebDriver) API1.1 下载selenium2.0的包 官方download包地址:http://code.google.com/p/seleniu ...

  10. 201671030106 何启芝 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 >>2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 >>实验十四 团队项目评审&课程学习总结 课程学习目 ...