ReactNative中如何使用自定义的Iconfont图标

    在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

当App项目的大小达到一定规模时，App包的Size也会随之增大，这个时候我们一般会对App包的Size做分析优化来达到减少包大小的目的，利用iconfont来替代项目中原有的png单色图标是你的一种选择，这个之后会专门出一篇文章来记录减包大小的相关东西。

    这篇文章要分享的是在React Native开发中如何使用自定义的Iconfont图标，并提供一键自动生成对应映射文件的脚本。

Demo及脚本地址：RNIconfont【欢迎issue/star/follow~】

本文主要分为三部分：

• react-native-vector-icons库的集成与使用
• 如何使用任意自定义的iconfont
• 编写脚本来快捷生成iconfont映射文件

1.react-native-vector-icons库的集成与使用

react-native-vector-icons是ReactNative开发中十分好用的一个用来展示iconfont图标的库。

集成只要两步：
1.引入依赖

Run: npm install --save react-native-vector-icons

2.链接原生库

Run: react-native link react-native-vector-icons

如果第二步链接失败或者运行错误，可以自己手动链接，具体可以参考react-native-vector-icons说的比较清楚了。

集成完毕后，可以看到这个库默认引入了几个ttf文件（android项目在assets/fonts下）：

也就是说这些ttf文件中所有icon都可以直接使用，下面就说一下如何使用。

使用非常简单，如下：

import Icon from "react-native-vector-icons/Ionicons";

<