在uni-app项目中使用阿里巴巴矢量图标库，使得应用可以一键切换整体配色风格

在uni-app项目中使用阿里巴巴矢量图标库

轻松让你的应用更美观，达到图标文字风格统一；十分用来制作个人的应用，节约设计上花费的时间。

图标查找并选择

• 登录阿里巴巴矢量图标库创建一个项目，并选择需要的图标添加到该项目中。
  

将图标下载到本地

• 下载项目图标并解压，找到iconfont.ttf字体文件包。及使用字体图标，因为可以动态修改图标颜色，很方便；svg彩色图标是好看，但是支持不是很全
  
  

在uniapp项目中使用

• 将iconfont.ttf文件拷贝到项目的static目录下。
• 在项目根目录的App.vue文件中进行全局引用：

<style>
/*导入字体图标*/
@font-face {
	font-family: 'iconfont';
	src: url('~@/static/iconfont.ttf') format('truetype');
}
/*设置字体图标*/
.iconfont {
	font-family: "iconfont" !important;
	font-size: 1em;
	font-style: normal;
}
</style>

• 在页面中随意使用字体图标：如果图标unicode码不清楚可以在阿里图标库中查看或复制
  

<text class="iconfont">&#xe60c;</text>

使用字体图标的好处

1. 兼容性好，基本不考虑兼容问题。
2. 大小随意调整，不失真。
3. 图标颜色随意调整，方便做各种状态或风格。

什么都好，就是不能达到精美的多色效果；如果是简洁的办公应用推荐使用，如果是精致优雅的应用可以考虑svg等支持多色的格式。

风险提示

根据阿里巴巴矢量图标库的官方说明，平台上的所有图标均为学习交流使用；商用需要取得作者授权。

如果你的应用只个小体量的，估计没人会来找你麻烦。但是如果能做得很大，请提前规避这块的风险。

• 尽量集中性的使用图标，这样面对的作者也要少一点。
• 可以给作者打赏，获取商用许可，一般都还是很愿意的。
• 都能做大了干脆就自行设计图标得了。