简介

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。在前端中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加程序打包后的体积,以小程序为例,小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用阿里巴巴矢量图标库,Font Awesome等。
图1

开始

我们打开阿里图标库官网(https://www.iconfont.cn/),选择好图片库或者搜一搜,选好图标并加入项目后,选择Font class,再点击生成在线代码,选中在线链接复制后,在新的标签中打开此链接的源码页,Ctrl+A 全选整个页面,然后 Ctrl+C 复制粘贴到记事本(暂存)。
图2

部署

打开小程序开发者工具,在小程序目录中新建一个文件夹创建.wxss文件,在这里我创建的是/common/icon.wxss,然后打开这个文件,将刚刚复制的代码 Ctrl+V 粘贴进去,然后 Ctrl+S 保存。
图3

再打开小程序目录下的app.wxss文件,新增下面一句引入wxss代码后保存即可。
@import "/common/icon.wxss";
图4

测试

然后我们就可以在小程序任意.wxml界面插入以下代码引入,再编译,图标就出来了,如图所示



图5

总结

通过引入图标的方式,我们对比体积,引入icon.wxss文件只有3.35kb的大小,而下载的图标光一个图片都不止3.35kb。这样下来极大的缩小了图片的占用体积。

tips:
1、图标可以设置style,例如色彩,大小等。
2、目前小程序不能直接在app.wxss中import在线链接,会报“File not found”。

END
本文作者: 文章标题:在小程序中使用阿里图标库iconfont
本文地址:https://plaidweb.cn/default/023.html
版权说明:若无注明,本文皆时光荏苒web原创,转载请保留文章出处。
最后修改:2022 年 06 月 18 日
感谢您的赞赏,将用于联合国儿童基金会及服务器维护