在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文件。