为啥要使用第三方图标库
微信小程序自带的icon组件默认只有9种类型的图标。在开发过程中，这个是肯定不够用的。也可以自己用css绘制图标，就是有点浪费时间。前端可以直接使用阿里巴巴矢量图标库。对于普通的网页，H5页面开发按照阿里巴巴矢量图标库的文档使用就行了。不过在微信小程序里应该如何使用是个问题，因为微信小程序不支持html标签。
下载阿里矢量图标
在阿里矢量图标库网站上挑选需要的图标，加入项目，然后下载。
使用font-class方式在微信小程序引入图标
下载后会得到一个zip格式的压缩包，把压缩包解压，然后按图示的步骤引入对应文件：
-
把下载文件中的 iconfont.css css文件里的内容复制到 app.wxss 文件中作为全局样式。对应步骤1和步骤2
-
步骤3中的内容就是从 iconfont.css css文件中复制来的内容
-
步骤4和5是配置是配置字体文件，为什么要放在本地，一个是不想使用阿里的cdn，第二个原因可以参考 @font-face的跨域问题
-
步骤5是配置全局字体图标的大小
在微信小程序中使用font-class方式引入的图标
font-class方式引入的图标，缺点是只支持单色，不支持多色图标，这个时候就可以考虑使用svg的方式引入图标了
下注SVG格式的图标
在微信中使用svg格式的图标，本质上和使用图片是一样的，为啥不使用图片，具体可以参考：矢量图和位图的区别
将SVG格式的图标转换成base64
网上有很多图片转base64的工具。百度谷歌下就有
在微信小程序中使用svg转换的base64格式
步骤一设置svg图标的默认大小，步骤二通过css的 background-image:url("") 来使用图标。
为啥不直接在使用svg文件,要转成base64文件
第一：因为微信小程序不支持 svg 标签
第二：为啥不能在css中直接引入svg文件。因为要报错，微信只支持网络图片和base64
参考
使用的矢量图标：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=18579
阿里巴巴矢量图标库：https://www.iconfont.cn/
微信icon：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
@font-face的跨域问题：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face#%E6%B3%A8%E6%84%8F
