Element UI 是目前流行的一款前端UI工具。它能配合Vue這個流行的前端框架。安裝使用也簡單：npm i element-ui -S即可。不過美中不足的是自帶的圖標集合不夠用，圖標太少了。今天剛好碰到這個問題，現在來分享一下如何在Vue Element中使用阿里雲矢量圖標庫。
element 自帶圖標庫
一，註冊阿里雲圖標庫Iconfont，過程自行百度。
二，創建項目
三，添加圖標到項目：首先在首頁搜索需要的圖標，然後添加到購物車，接著添加到指定的項目
四，下載圖標文件
五，將文件解壓，複製到Vue項目：我是在Vue項目的src-assets下創建了icon文件夾，將所有的文件複製了過來
六，修改其中的iconfont.css文件：這裡以引用icon-shouye圖標為例
七，複製阿里雲圖標庫中的所選圖標的代碼
八，重新編譯Vue項目：npm run dev
九，引用圖標：這裡以我的el-button為例：
<el-button icon=”icon-shouye” size=”small” circle style=”background:#abd3ff”></el-button></div>
對比，這個小房子的圖標是阿里雲圖標庫的，在element自帶的圖標庫並沒有，至此，引用成功。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/235035.html
微信掃一掃 
支付寶掃一掃 