一文帶你搞定svg-icon的使用方式
svg-icon的使用方式
前置
有的時候，我們經(jīng)常在業(yè)務(wù)中會需要使用字體圖標(biāo)的場景，比如同一個圖標(biāo)在不同的地方顯示不同的顏色，這個時候我們使用字體圖標(biāo)就非常的合適，
這篇文章我們主要講的是在Vue中顯示的字體圖標(biāo)`svg-icon`的使用 # 開始啦！
第一步：下載相應(yīng)的**包**或者**插件**（會提示沒有安裝xml-loader,只需要安裝下xml-loader，重啟下項目就可以解決報錯）
## 使用npm npm install vue-svg-icon xml-loader -D ## 使用yarn yarn add vue-svg-icon xml-loader
第二步：把從iconfont下載的.svg的文件
第三步：在icon的Vue組件中寫代碼 ../src/components/svgIcon/index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" rel="external nofollow" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>第四步：在存放svg的文件夾外部，創(chuàng)建一個index.js文件
如下
代碼如下：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
// 在./svg下查找 “.svg”文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)第四步：在main.js中引入icon/index.js文件中全局設(shè)置
//全局加載就可以了 import '@/icons/index.js'
第五步：直接在Vue組件中使用即可，直接使用文件名就可以了。
<div> <svg-icon icon-class="language" /> </div>
效果圖
注意：
svg-icon是前端經(jīng)常使用的，必須要會使用。
icon圖標(biāo)在線生成教程（svg轉(zhuǎn)icon）
1、準(zhǔn)備好項目的Svg文件
2、訪問在線生成工具，網(wǎng)址：https://icomoon.io
3、其余操作步驟按照如下截圖
（1）點擊右上角“icoMoon App”按鈕
（2）點擊按鈕導(dǎo)入svg文件
（3）查看使用方法
（4）定義下載文件名稱和相關(guān)配置
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue for循環(huán)出來的數(shù)據(jù)實現(xiàn)用逗號隔開
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,正確的HTML編碼和結(jié)構(gòu)對于網(wǎng)頁的正確顯示至關(guān)重要,當(dāng)HTML代碼正確無誤時,網(wǎng)頁的效果圖將與設(shè)計師的預(yù)期相符,反之則可能出現(xiàn)布局錯亂、樣式失效等問題2024-10-10
這篇文章主要介紹了vue中methods、mounted等的使用方法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標(biāo)識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue微信項目按需授權(quán)登錄策略實踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue 項目全屏插件screenfull使用案例,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
Vue3 composition API實現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復(fù)用的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue3?element-plus?實現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
vue-router實現(xiàn)tab標(biāo)簽頁（單頁面）詳解
這篇文章主要為大家詳細(xì)介紹了vue-router實現(xiàn)tab標(biāo)簽頁的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10