vue 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，完成啦