首先因為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的集合，與另外兩種相比具有如下特點：
font-size , color 來調整樣式。總結
以上所述是小編給大家介紹的vue使用自定義的icon圖標的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
