vue Elementui 引入第三方icon(阿里矢量库)_elementui 添加icon

在做项目的过程中，发现elementui图标比较少，根据ui好多图标都没有，被迫只能通过引入第三方图标啦，自己通过参考其他教程，整理一下过程呀

首先呢 需要去阿里矢量图库注册账号呀

接下来，需要新建项目 打开“图标管理”中“我的项目”，点击新建

emmm，填写项目名称与那个什么什么前缀，名称可以任意，需要注意前缀不可以和elementui前缀相同哦，填写完后点击新建就可以啦

继续呀， 这样我们就可以将我们想要的icon加入购物车了，这时如果想要的icon不多，可以进行手动加购，若要将一套的icon全部加购（没有批量导入功能）因此需要做以下操作，在当前页面打开开发者工具，并在控制台输入以下代码，回车，之后就会一个个的自动加购了

var icons = document.querySelectorAll('.icon-gouwuche1');
 
var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
 
auto_click(0);

加购之后打开购物车，将购物车里面的icon添加到项目中，选择刚刚新建的项目，进行添加

 添加之后就可以看到“我的项目”中的图标了，之后可以改icon名称以及样式等等，修改完之后点击下载至本地

下载完成之后，需要打开iconfont.css文件，添加以下代码

[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
 
{ font-family: "iconfont" !important;
 
font-size: 16px;
 
font-style: normal;
 
-webkit-font-smoothing: antialiased;
 
-moz-osx-font-smoothing: grayscale; }      

设置完成之后，打开vue项目，在src/assets目录下新建文件夹，将所有文件复制到新建的文件夹中 （我新建的文件夹为thirdIcon）

还有最后一步就可以使用啦，在App.vue文件中进行引入

 在项目中如何使用呢...与elementui使用icon的方式是一样的，具体的icon名称需要去复制一下的

 emmm，完成啦