阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少,目前有418w+ icon,可以说是前端工作人员的首选,博主也在这里安利一下。
网址:点击直达
有时候我们写vue的时候经常要引入icon图标,下面我就简单介绍一下vue 如何引入阿里图标。
-
注册一个账号是必不可少的O(∩_∩)O哈哈~,这里就不介绍了。
-
去阿里图标矢量图标库将想要的图标添加入库。
-
再去库中将图标添加到项目。
-
再到我的项目中,选择
,我这里采用的是将图标代码包下载到本地再引入到vue项目中。 -
在vue项目的assets文件夹下新建一个iconfont文件夹(名字随意),将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff复制到iconfont文件夹下。
-
在main.js中全局引入iconfont.css。
-
之后就可以在项目中正常使用了。