[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

轉載請著名出處！謝謝~~