前言
在开发uniapp的时候，在有些地方需要使用图标。在以往的vue开发中我通常都是封装svg图标组件，但是在uniapp开发时发现在APP中不支持svg，于是使用了另一种方法。根据uniapp的uni-icons组件的实现方法扩展自己的图标。
万变不离其宗，以下只是其中的一种扩展形式，可以根据自己的实际情况修改。
主要工具
阿里图标库 Iconfont-阿里巴巴矢量图标库
百度字体编辑器 FontEditor
将ttf文件转化为base64 https://www.motobit.com/util/base64-decoder-encoder.aspbase64 decode and encodebase64 decode and encode
实现
1.在Iconfont-阿里巴巴矢中添加需要的图标，比如我添加了一个时钟图标，然后点击下载
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
2.打开百度字体编辑器 FontEditor，新建一个项目，然后点击导入字体文件，将之前下载的iconfont文件中的iconfont.ttf和uniapp中的uni-icons中的uni.ttf文件导入。
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
编辑
切换为全宽
导入iconfont.ttf
编辑
切换为全宽
导入iconfon.ttf后
编辑
切换为全宽
导入uni.ttf
编辑
切换为全宽
全部导入后
3.导出新的ttf文件
编辑
切换为居中
添加图片注释，不超过 140 字（可选）
4.使用https://www.motobit.com/util/base64-decoder-encoder.aspbase64 decode and encodebase64 decode and encode将新的ttf文件转化成base64
注意：复制生成的base64后需要使用其他工具将字符串中的回车去掉，可以使用WPS等。
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
编辑
切换为全宽
使用WPS删除回车
5.可以直接修改uni-icons组件，也可以复制uni-icons封装自己的组件。比如封装自己的组件：
复制uni-icons
修改文件名mz-icons
替换base64部分
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
编辑
切换为全宽
一直到这
根据百度字体编辑器 FontEditor中的值修改icons.js，添加新的图标
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
编辑
切换为全宽
添加图片注释，不超过 140 字（可选）
6.完成使用
和uni-icons使用方法一样
编辑
切换为全宽
显示效果
注意
在复制生成的base64后，一定要将其中的回车符删除