vue使用自定義icon圖標的方法
更新時間：2018年05月14日 16:36:40 作者：艾爾丶Lawliet
這篇文章主要介紹了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的集合，與另外兩種相比具有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過
font-size,color來調整樣式。 - 兼容性較差，支持 ie9+,及現代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
總結
以上所述是小編給大家介紹的vue使用自定義的icon圖標的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
vue頁面設置滾動失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁面設置滾動失敗的解決方案(scrollTop一直為0),本文通過場景分析實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue?Electron實現輸入法自動刷字數功能，文中的示例代碼講解詳細，對我們學習C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
這篇文章主要為大家介紹了Iframe在Vue中的狀態(tài)保持技術詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了解決vue-router 嵌套路由沒反應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
數據拉取更新這個功能相信大家基本都見過，但是如果要做起來卻不止如何做起，所以這篇文章給大家分享了vue.js通過自定義指令實現的方法，閱讀本文需要對vue有一定理解，有需要的朋友們下面來一起看看吧。2016-10-10
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
父子組件通訊是指在前端開發(fā)的組件化架構中,父組件與子組件之間互相傳遞數據和觸發(fā)功能的一種機制,這種機制使得組件能夠保持獨立性的同時,也能協同工作,本文給大家介紹了Vue父子組件通訊的四種方法,需要的朋友可以參考下2024-07-07
Vue3中的h方法用于創(chuàng)建虛擬DOM節(jié)點,是渲染函數的核心,它接受三個參數：type（節(jié)點類型）、props（屬性對象）和children（子節(jié)點）,通過示例展示了如何使用h方法創(chuàng)建簡單的HTML元素、帶有屬性的元素、嵌套元素和自定義組件,感興趣的朋友一起看看吧2025-03-03
今天小編就為大家分享一篇vue2.0 下拉框默認標題設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08