[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

 

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

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={20}  style={styles.leftIcon}/>

<Iconfont name='icon-jinrujiantou' size={20}  style={styles.rightIcon}/>

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10861606.html

转载请著名出处！谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/10861606.html