# 在 React Native Elements 中集成阿里iconfont
> react-native-elements 实际上使用 react-native-vector-icons 库, 只不过是在外围又套了一层封装. 所以除了最后一步外, 本教程也适用于使用 react-native-vector-icons 的项目集成 iconfont.
## 准备 iconfont 资源
这个不用多说什么. 不过就是注意, 如果同时使用多个iconfont库, 那么改一下字体名再导出.
## iOS 添加字体资源
1. 打开Xcode, 新建目录`Fonts`, 将字体文件(.ttf)拖入其中. 选择拷贝资源、添加到目标构建中.
2. 这时工程`Build Phases`中的`Copy Bundle Resources`里应该已经有这个文件了, 没有要加上.
3. 在项目目录的`info.plist`中添加对应的字体文件键值.
## Android 添加字体资源
1. 将字体文件拷贝到`android/app/src/main/assets/fonts/`.
2. 然后在`android/app/build.gradle`中增加下面的配置:
```
//使用内置的iconSets
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
//使用自定义iconSets
project.ext.vectoricons = [
iconFontNames: [ 'iconfont.ttf'] // Name of the font files you want to copy
]
```
## 建立 Icon 组件
react-native-vector-icons 提供了[建立自定义图标字体库的API](https://github.com/oblador/react-native-vector-icons#custom-fonts), 这里使用其中的`createIconSet`方法. 方法原型如下:
```ts
function createIconSet(
glyphMap:{ [iconName:string]:number },
fontFamily:string,
fontFile:string
){}
```
其中, `glyphMap`是一个由图标名和其unicode十进制数组成的键值对对象.
这里产生一个问题: 如何给iconfont的字体建立一份`glyphMap`呢? 探索发现iconfont导出的压缩包中含有一个`iconfont.json`文件, 里面直接就有图标名和unicode数据, 但数据格式有一些偏差, 需要重新做一下映射. 网上有一些使用`iconfont.css`进行处理的文章, 原理类似但比较复杂, 直接用`.json`文件方便了许多.
2021年可用的生成`glyphMap`的脚本如下:
```js
const filePath = process.argv[2];
if (filePath === undefined) {process.exit(-1);}
const fs = require('fs');
const jsonSrc = JSON.parse(fs.readFileSync(filePath));
let jsonDst = {};
jsonSrc.glyphs.forEach(({font_class, unicode_decimal}) => {
jsonDst[font_class] = unicode_decimal;
});
console.log(JSON.stringify(jsonDst));
```
把此脚本的输出保存为`glyphmap.json`, 接下来即可在项目中正式建立自己的图标组件了! 在源代码中新建一个`Iconfont.jsx`文件, 写入如下内容:
```jsx
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from '<PATH TO GLYPHMAP JSON>';
export const Iconfont = createIconSet(glyphMap, "iconfont", 'iconfont.ttf');
```
现在, **已经可以使用如下组件来绘制图标了**!
```xml
<Iconfont name="aixin" size={60} color="#4F8EF7" />
```
注意, **每次更新iconfont后, 需要把字体重新拷入原生资源目录, 需要重新生成glyphMap**. 建议做成自动化脚本.
## 在 react-native-elements 中集成自定义图标
现在只差最后一步了. 应当知道, react-native-elements 给我们封装了一个 `Icon` 组件, 统一管理所有的 react-native-vector-icons 图标字体组件.
最好把我们自己的图标也接入到它的统一管理中. 这里参照[文档](https://reactnativeelements.com/docs/icon#custom-icon-fonts)进行操作.
在`index.js`添加以下语句:
```js
// registerCustomIconType('type', VectorIconComponent);
registerCustomIconType('iconfont', Iconfont);
```
这样就可以将所有图标整合使用了!
```xml
<View>
<Icon type="iconfont" name="aixin" />
<Icon type="antdesign" name="qq" />
</View>
```
## 参考资料
<https://www.jianshu.com/p/c900f6a0797f>
![]()