做一个有情怀的程序员
react-native-vector-icons图标库中有很多图标，但并不是完全符合我们的需求，在开发过程中往往都是由美工给出效果图，我们根据效果图绘制UI界面，如此一来就会发生图标风格不匹配等问题，那有没有可能使用自定义图标呢？答案是肯定的，但必须是SVG格式且要借助于第三方网站如：阿里巴巴矢量图标库、icomoon.io等。
配置工作：
1.假设你已经成功配置了react-native-vector-icons，如果没有配置请移步React Native第三方组件之react-native-vector-icons。
2.登录阿里巴巴矢量图标库，搜索并选择你需要的图标，加入到项目中，如图1；
3.选择好所有图标后，点击页面右上角购物车按钮（上面会显示你所选图标的总数），如图2；
4.点击添加到项目按钮，如图3；
5.将图标添加到项目，你可以选择已有项目，也可以新增项目，然后确定，如图4-5；
6.选择每一个图标上的编辑按钮可以调整图标的大小、位置、可以看到图标的16进制编码，全部调整好后，将文件下载到本地，如图6-7；
7.打开下载后的文件夹，找到 iconfont.ttf 文件，并将文件复制到react项目中的/node_modules/react-native-vector-icons/Fonts 目录下。
8.使用Terminal进入项目根目录，执行react-native link 命令，等待执行完成。
9.在/node_modules/react-native-vector-icons/glyphmaps/ 目录下新建iconfont.json 文件，文件内容如下：
{
"home" : 58912,
"category" : 58880,
"cart" : 58892,
"mine" : 58948
}
key是项目中使用的图片name字段，value就是最初上传图标后，图标下方的16进制转成10进制的数值。如何将16进制转成10进制请移步在线进制转换
10.在/node_modules/react-native-vector-icons/ 目录下新建iconfont.js 文件，文件内容如下：
/**
* Created by ice on 2017/8/27.
*/
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/iconfont.json';
const iconSet = createIconSet(glyphMap, 'iconfont', 'iconfont.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;
至此，配置工作全部完成，可以到项目中尽情的享用了。
使用
1.在页面中导入组件import Icon from 'react-native-vector-icons/iconfont';然后就可以使用了；
import React, { Component } from 'react';
import {AppRegistry,View} from 'react-native';
import Icon from 'react-native-vector-icons/iconfont';
export default class icons2 extends Component {
render() {
return (
<View style={styles.container}>
<Icon name={'home'} size={26} color="red"/>
<Icon name={'category'} size={26} color="red"/>
<Icon name={'cart'} size={26} color="red"/>
<Icon name={'mine'} size={26} color="red"/>
</View>
);
}
}
AppRegistry.registerComponent('icons2', () => icons2);
2.以下是我使用react-navigation写的简单的页面跳转的Demo，其中的图标就是使用的自定义图标，源码就不献丑了，看看效果图吧。
结语：
自定义图标教程就到这里，有任何问题可以留言或者私信我，说的不对的地方请提出且包涵，谢谢！
