react-native 自定义icon图标库

众所周知，精致小巧的图标对一个产品的颜值影响比较大，在使用react-native+expo开发app的过程中，内部提供的icon图标总是有的差强人意，解决这一痛点的办法就是自定义一个icon图标库。

详细步骤：

1：在阿里巴巴的矢量图标库中选取需要的图标并打包一起下载

2：复制下载的iconfont.ttf文件到@expo/fonts中

3：在@expo/vector-icons/vendor/react-native-vector-icons/glyphmaps下新建Iconfont.json文件；然后打开之前下载的iconfont.css文件，把对应icon的16进制编码转换成10进制，然后按照（图标名：对应10进制编码）的格式记录在刚刚新建的Iconfont.json文件中。

4：在@expo/vector-icons下新建Iconfont.js文件，内容代码如下（附示例截图）

import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Iconfont.json';

import createIconSet from './createIconSet'; 

export default createIconSet(glyphMap, 'iconfont', require('./fonts/iconfont.ttf'));

5：找到@expo/vector-icons下的index.js，添加该段代码

6：在你要使用的组件中导入自定义的icon组件，直接使用即可

import { Iconfont } form "@expo/vector-icons"

name={iconName} 

size={number}

color={fontColor}

/>

嗯，现在就可以按照自己的需要定制icon图标啦。

因为目前没有项目文件的参照，上面的@expo/xxx 路径可能也许大概有点小问题~~，机智的小伙伴们肯定能够发现的。(✿◡‿◡)

哈希表小伙伴建议clone懂美味代码，除了字体放在assets/fonts下，其余代码参照参照util文件夹。

复制脚本文件fix_modules.sh，修改完成后命令行执行bash fix_modules.sh

Thanks♪(･ω･)ﾉ