在react-native中添加高可維護的iconfont字體

字體圖標盛行的年代，在項目裏使用一套不失真又能夠隨意改變大小顏色的圖標，是多麼舒服的一件事。這裏要推薦iconfont.cn，超多免費圖標，固然了，你的專屬美工也能夠本身建個項目並上傳本身的字體圖標。

可是有一件很悲傷的事情，iconfont字體，在RN中不能像web端同樣直接使用。因此有了下面的教程（福利：比通常教程都精簡，筆者用shell腳本替你手動處理了不少事情）

一、下載

假設你已經在iconfont網站建好項目，那麼進入項目頁面，點擊下載按鈕

下載完以後，解壓，將其中的iconfont.css和iconfont.ttf複製到你的項目中，假設你是放到項目根目錄的static/目錄下面。

二、安裝插件

想了解細節的點擊傳送門

npm install react-native-vector-icons --save

三、JSON映射

研究源碼你會發現，每套字體都會附上一個json文件，就是名稱和位置之間的關係。而iconfont是沒有提供json文件的。不要緊，筆者已經爲大家準備好了，請保存到文件中，假設你的文件名叫create-iconfont-json.js

const fs = require('fs');
const generateIconSetFromCss = require('react-native-vector-icons/lib/generate-icon-set-from-css');
// 和你剛纔保存的iconfont字體文件在一塊兒，方便管理
const cssDir = __dirname + '/static/';
const iconSet = generateIconSetFromCss(cssDir + 'iconfont.css', 'icon-');

fs.writeFileSync(cssDir + 'iconfont.json', iconSet);

四、複製字體

這個插件包有好多套字體，咱們能夠須要把本身的iconfont也複製到包中對應文件夾，固然了，不可能手動複製，筆者歷來都是解放雙手的。
給你們準備了一個shell腳本，你須要保存到根目錄，假設你命名爲copy-font.sh

# 先生成json文件
node create-iconfont-json.js

# 包自帶的字體10幾套，佔空間，若是你須要那些字體庫，把下面這行註釋
rm -rf node_modules/react-native-vector-icons/Fonts/*
cp -f static/iconfont.ttf node_modules/react-native-vector-icons/Fonts/

# 連接到android和ios
react-native link react-native-vector-icons

而後執行

sh copy-font.sh

此時，你看看static/目錄下面，應該多出了一個iconfont.json了，這個文件後面有用。

五、建立react組件

這個纔是你最終須要用到的東西，保存到文件中，假設你保存到文件 src/components/IconFont.js

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import json from '../../static/iconfont.json';
const Icon = createIconSet(json, 'iconfont', 'iconfont.ttf');

// export {Icon};
// export default Icon;

export class IconFont extends Icon {
  static defaultProps = Object.assign({}, Icon.defaultProps, {
    size: 18,
  });
}

你也能夠直接export default Icon，它自己也是component，接下來你就能夠像react正常組件同樣使用它。

import React, {Component} from 'react';
import {View} from 'react-native';
import {IconFont} from './IconFont.js'

export class Test extends Component {
    render() {
      return <View><IconFont name="someIcon" /></View>;
    }
}

更多用法請移步：github上的介紹，這邊只是拋磚引玉

維護

用腳本維護就是舒服，若是你的字體有變動，那麼重複第一步的下載，接着執行sh copy-font.sh，就完事了。

能夠把執行命令放到npm start 中，這樣對於本身和團隊，都是無縫更新的。而後你就能夠大膽的把iconfont.json放進.gitignore了

說明

使用這套方案，字體圖標原先的色彩會被覆蓋，意思就是你的圖標只能有單色。若是要用多色，你須要使用另外一個插件（傳送門），缺點就是一個圖標須要提供一個svg文件。