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>
對比,這個小房子的圖標是阿里雲圖標庫的,在element自帶的圖標庫並沒有,至此,引用成功。