uni-app引用阿里巴巴官方图标库

最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式

目录

• 1.阿里巴巴图标库
• 2.引入文件
• 3.使用图标
• 4.总结

1.阿里巴巴图标库

本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目；

阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库

进入官方图标库后，点击第一个图标库

由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码：

var iconList = document.querySelectorAll('.icon-gouwuche1');
for (var i = 0; i < iconList.length; i++) {
iconList[i].click();
}
           

完成后在购物车中会出现所有图标(页面可能会卡一会儿)

将购物车中的图标全部加入项目(注意：需要提前在自己的账号中创建一个空项目)

2.引入文件

点击图标管理，进入自己的项目后台

点击我的项目，然后点击加入图标的项目，可以看到刚刚加入的所有图标

点击下载至本地，将图标样式文件下载到本地，解压后可以看到如下内容

将iconfont.css加入uni-app项目中，我的路径如图所示

我们再回到阿里巴巴图标管理后台，点击Unicode和生成在线连接

可以看到如下图所示的链接

将上图红线框中的链接替换到之前加入到uni-app项目中的iconfont.css中，iconfont.css需要被替换的内容如下图所示，即@font-face中的内容

然后在全局文件中引入iconfont.css文件，我这里的全局文件为App.vue

3.使用图标

在页面中直接使用

**注意，需要使用class属性，前缀为icon iconfont，最后的内容为阿里巴巴图标库中的图标名称 **，如下图所示

最终效果如图所示，首页后面那个图标就是最终效果(这里使用的是微信小程序)：

4.总结

引用图标库的网络地址可以省去导入大量图标文件的麻烦，也能提升整个项目的运行速度，且需要使用不同的图标时只需要在官网复制相应代码即可，相比于传统的加入图标文件要省事的多