這次帶給大家如何在vue中使用自訂icon圖示，在vue中使用自訂icon圖示的注意事項有哪些，以下就是實戰案例，一起來看一下。
首先因為elementUI提供的icon太少了，所有自己找找有沒有向量圖可以補充的，嘗試多種方法，覺得下面方法簡單易懂，分享給大家
效果圖：
推薦使用阿里爸爸向量圖示管理，iconfont
使用方法登入帳號，找到需要的圖示加入購物車
然後加入到項目
再然後下載程式碼到本機
下載程式碼檔案然後解壓縮出現這列表
#開啟HTML文件，引用方法教學
補充我人的坑，之前想著在style標籤裡@import ""，結果一直報錯，試了很多方法還是沒效果，把問題想複雜了
第一步：在index.html引入fontclass程式碼：
<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >
第二步：挑選對應圖示並取得類別名，套用至頁面：
<i class="iconfont icon-xxx"></i>
特點：
相容性良好，支援ie8 ，及所有現代瀏覽器。
比起於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class裡面的unicode引用。
不過因為本質上還是使用的字體，所以多色圖示還是不支援的。
symbol引用第一步：html引入symbol程式碼：
<script src="./iconfont.js"></script>
第二步：加入通用css程式碼（引入一次就行）：
<style type="text/css">.icon
{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;}</style>第三步：挑選相應圖標並獲取類別名，應用於頁面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx" rel="external nofollow" > </use> </svg>
這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。相關介紹可以參考這篇文章這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：
支持多色圖示了，不再受單色限制。
透過一些技巧，支援像字體那樣，透過 <a href="//m.sbmmt.com/wiki/807.html" target="_blank">font-size</a> , color 來調整樣式。
相容性較差，支援 ie9 ,及現代瀏覽器。
瀏覽器渲染svg的效能一般，不如png。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何在vue中使用自訂icon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！
