使用react-native-vector-icons自定义图标

声明：本文假定已经正确配置好react-native-vector-icons

UI给的图片，需要是svg格式的，上传到第三方网站，如www.iconfont.cn,一些配置后，就可以在RN项目中使用，这样项目中就可以少导入很多图片。

登录上面网址，图标管理->我的项目->创建项目，然后导入所有你的svg格式图片，点击下载至本地，有用的是下载文件中的iconfont.ttf文件，以及每个图标下面的十六进制码，如e601

拷贝iconfont.ttf文件到项目的node_modules/react-native-vector-icons/Fonts下，再将iconfont.ttf拖到xcode，并且在info.plist添加对应的key，如下，10是刚手动添加的，其余为react-native link阶段自动生成的

接下来在node_modules/react-native-vector-icons目录下创建iconfont.js，内容就拷贝Ionicons.js，并将里面的Ionicons字段全部改成iconfont，如下

然后在node_modules/react-native-vector-icons/glyphmaps中创建iconfont.json，内容格式如下

key是项目中使用的图片name字段，value就是最初上传图标后，图标下方的十六进制转成10进制的数值。

使用和效果如下：

注：

1、网址的图标每次更换后，必须重新下载iconfont.ttf文件，并替换掉xcode和node_modules两处iconfont.ttf文件才能生效

2、只有纯色svg格式的图片才用这种方式管理，否则显示出来的东西没法看。。。

3、从步骤可以看出，完全是参考react-native-vector-icons的众多自带文本库配置的