在react-native項目中使用iconfont自定義圖標庫(android)

 

1. 安裝react-native-vector-icons

yarn add react-native-vector-icons
react-native link

如果沒有關聯成功的話，可以參考官方文檔手動配置一下

2. 將從阿里下載的iconfont.tff文件復制到以下目錄

3. 在android/app/build.gradle中添加:

project.ext.vectoricons = [
    iconFontNames: ['iconfont.ttf' ] //添加你需要賦值的字符文件
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. 在項目中創建字體配置文件

// DIYIcon.js

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'DIYIcon', 'iconfont.ttf');   //  'DIYIcon'可自定義名稱

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

　　

// iconfont.json

{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  "envelope-o": 61443,
  "heart": 61444,
  "star": 61445,
  "star-o": 61446,
  "user": 61447,
  //等等...
}

 

附iconfont.json自動提取的方法：

4.1 安裝python

點擊下載pthon安裝包https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
等待安裝完成！

4.2 配置python環境變量

在path中添加 python安裝目錄以及Scripts 

 

4.3 安裝 fonttools

pip install fonttools

 

具體介紹請參考：github地址

4.4 准備react-native-iconfont-mapper

直接打包下載react-native-iconfont-mapper，或者通過git克隆到本地，這個目錄自己選個容易記住的，因為以后用的比較多。

 

項目比較單一，僅僅一個python文件。

4.5 提取字符表

將前面下載的字體包中的ttf文件拷貝到這里 

 

python iconfont-mapper.py iconfont.ttf iconfont.js

 

 

 

不出意外，可以生成一個iconfont.js文件，打開查看便可以看到我們所需要的json字符串

 

 

4.6 新建iconfont.json

{
  "home": 58880,
  "setting": 58881,
  "code": 58886,
  "money": 58951,
  "phone": 58952,
  "user": 58890,
  "customer": 58993,
  "message": 59034,
  "add": 59418,
  "password": 58910
}

 

這里需要注意，剛才生成的字符表json對象后面的值有引號，這里需要刪除

5. 使用

import DIYIcon from './diyicon/DIYIcon';

...

<DIYIcon name={'glass'} size={'50'} color={'#ed4040'} />

 

 

 

參考：

http://www.imbeta.cn/zai-react-nativezhong-you-ya-de-shi-yong-iconfont.html

https://segmentfault.com/a/1190000009939727

https://www.jianshu.com/p/332198bf46a7