uni-app项目给uni-icons增加字体图标（编辑ttf文件）

背景

uni-app项目开发发现图标不够用，想直接在现有的图标中增加新的图标。网上大多是讲如何引入iconfont的字体，而非直接把字体添加到uni-icons中。

实现原理

字体文件的本质是，unicode作为索引的字体矢量图库。我们需要在图库中增加新的图片，然后通过矢量图的索引来使用字体图标。

实现步骤

3.1 下载uni-icons的ttf字体图标文件

我们需要编辑ttf文件，所以需要先下载这个文件。这里参考我的上一遍博客，把base64文件编码转化文ttf文件。
https://blog.csdn.net/kouryoushine/article/details/102393171

3.2 准备新的字体图标文件（iconfont）

添加过程不详叙述，星星是我要添加的图标，下载到本地后，会看到一个ttf文件

http://fontstore.baidu.com/static/editor/index.html#

3.3 用百度字体平台合并两个ttf文件

导入uni-icons的ttf文件后，看到所有uni-app的图标库已经被保存。

导入从iconfont下载的ttf文件。导入后可以看到新的图标和编码。

3.4 导入字体

点击导出ttf就会生成新的字体文件

引入新的字体文件

参考我上面给出的博客连接把ttf转换为base64文件,把uni-icons.vue中的font-face替换掉

替换后相当于现在uni-app项目中的字体文件包含了新的图标。我们只需引入图标的索引位置即可
在uni-icons.vue中添加新的图标的名称和索引编号。
注：名称是自定义的uni-icon-xxxx ，索引编号在百度字体图标上选择“预览”可以看到。

.uni-icon-ccstar:before {
	content: '\e69d';
}

使用新的图标

其实到此位置，新的星星图标已经存在于uni-icons库中,可以像普通图标一样使用。这里我修改了uni-rate的星星样式。效果如下，新的图标星星更加圆润。

结语

过程并不精细到每一步，主要是提供解决问题的思路。看起来复杂，其实熟练后可以几分钟内完成新图标的导入，有问题可以留言。