如何在vue中使用自訂icon圖標

這次帶給大家如何在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="http://www.php.cn/wiki/807.html" target="_blank">font-size</a> , color 來調整樣式。

• 相容性較差，支援 ie9 ,及現代瀏覽器。

• 瀏覽器渲染svg的效能一般，不如png。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用WebPack設定vue多頁

#完美處理Nodejs全域安裝模組無法找到指令

以上是如何在vue中使用自訂icon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！