react-native-vector-icons使用（二）

使用react-native-vector-icons大多都需要自定义，将项目图片转为ttf字体图标进行使用。框架的使用及自定义详细见：https://github.com/oblador/react-native-vector-icons

推荐图标库：

IconFont：http://www.iconfont.cn/home/index
Fontello：http://fontello.com/
IcoMoon：https://icomoon.io/app/#/select

步骤

1. 首先获取svg图标（设计师提供或者从图标库下载）；
2. 通过Fontello或者IcoMoon提供的方式进行svg转ttf；
3. 在react-native项目中使用ttf；

这里说下IcoMoon：
1. 通过 Import Icons 导入自己的svg图片

2. 对svg图标进行编辑

一般都是将Scale设置为fit to canvas,Alignment设置为Align to
3. 下载ttf文件
编辑完成后通过 Generate Font 方式下载，解压，font文件夹中的ttf即为图标文件，json文件记录了图标及图标库的信息。

自定义

官方文档中自定义字体图标有3种方式，其实后两种都是基于第一种，分别是对Fontello和IcoMoon两种方式导出字体库文件的封装。以IcoMoon方式为例：

其中图标对应的信息为”icon”

（1）使用方式三。直接将解压后的.json文件复制到icons库中，使用createIconSetFromIcoMoon方式创建图标字体；
（2）使用方式一。从解压后的json文件中提取每个icon下properties下的name和code的值作为key和value，生成新的json文件，使用createIconSet方式创建图标字体。按icons库提供的方式添加icomoon.js文件，代码如下：

import createIconSet from './lib/create-icon-set-from-icomoon';
import glyphMap from './glyphmaps/selection.json';

const iconSet = createIconSet(glyphMap,'icomoon','icomoon.ttf');

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!