在react-native中添加高可维护的iconfont字体

最新推荐文章于 2024-07-11 16:33:01 发布

weixin_34087503

最新推荐文章于 2024-07-11 16:33:01 发布

阅读量179

点赞数

文章标签： json javascript shell ViewUI

原文链接：https://segmentfault.com/a/1190000015197112

版权

字体图标盛行的年代，在项目里使用一套不失真又可以随意改变大小颜色的图标，是多么舒服的一件事。这里要推荐iconfont.cn，超多免费图标，当然了，你的专属美工也可以自己建个项目并上传自己的字体图标。

但是有一件很悲伤的事情，iconfont字体，在RN中不能像web端一样直接使用。所以有了下面的教程（福利：比一般教程都精简，笔者用shell脚本替你手动处理了很多事情）

1、下载

假设你已经在iconfont网站建好项目，那么进入项目页面，点击下载按钮

下载完之后，解压，将其中的iconfont.css和iconfont.ttf复制到你的项目中，假设你是放到项目根目录的static/目录下面。

2、安装插件

想了解细节的点击传送门

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

3、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);

4、复制字体

这个插件包有好多套字体，我们可以需要把自己的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了，这个文件后面有用。

5、创建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上的介绍，这边只是抛砖引玉