React Native 添加自定义图标库

最近在开发一个React Native小程序，遇到了很多问题，好在都解决了，近期将逐步增加一些解决问题式文章，方便各位网友学习，如有不对，请多指教！

本文讲述用react-native-vector-icons库，封装一个自己的图标库，也就是说添加自定义图标库，下面讲讲如何添加。

通俗易懂，而且本文只讲一种方式，方便各位网友学习，我讲的方式就是最简单的createIconSetFromIcoMoon方法。

第一步，准备好你的素材，最好是svg格式

第二步，进入网址：https://icomoon.io/app/#/select

点击Import Icons按钮，将图标批量导入，如图下所示：

image

第三步，点击Generate Font按钮。

第四步，点击Download按钮。

这时候，你会下载到如图所示结构的zip文件，将其解压，拷贝到项目根目录。

image

第五步，在Xcode中添加压缩包里的icomoon.ttf文件。

用Xcode打开工程文件，将icomoon.ttf文件复制一份，并拖动到Resources目录中，如图所示

image

第六步，点开Info.plist，在Fonts provided by application属性中添加这个字体的名称icomoon.ttf的键值。

[图片上传失败...(image-4890e0-1511162953775)]

第七步，在项目配置中的Build Phases中的Copy Bundle Resources 中添加该字体。

[图片上传失败...(image-1b144a-1511162953775)]

第七步，在项目根目录下，运行终端命令：

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

image

第八步，配置安卓：

编辑 android/app/build.gradle ，添加如下内容，可以说非常简单

project.ext.vectoricons = [
    iconFontNames: [ 'icomoon.ttf'] 
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

第八步，在代码中写：

import {createIconSetFromIcoMoon } from 'react-native-vector-icons';

import icoMoonConfig from '../icon/selection.json';

const Icon = createIconSetFromIcoMoon(icoMoonConfig);

export default Iconfontello;

第九步，作为组件调用

<Icon name="btc" size={32} />;