vuecli4插件svg-sprite-loader使用svg圖標(biāo)
更新時(shí)間：2023年08月21日 11:10:46 作者：柯柯的呵呵噠
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
vuecli4版本中使用svg-sprite-loader
每次使用一次插件，總會遇到各種各樣的坑，npm上面的文檔說明老舊，網(wǎng)絡(luò)上的文章總是字?jǐn)?shù)滿滿，內(nèi)在無比空虛，各種復(fù)制粘貼。我這個(gè)是使用vuecli4版本中使用svg-sprite-loader，廢話不都說，一起來看看滿滿的干貨
首先看下效果，避免方法的不正確性
效果圖
1、先從阿里圖標(biāo)庫中下載svg圖標(biāo)
說明：svg圖標(biāo)一定要去色，不然，調(diào)節(jié)的圖標(biāo)顏色的時(shí)候，是整體效果
圖標(biāo)去色
2、將下載好的svg圖標(biāo)放置到 assets/svg_icon/svg 文件夾中
如圖：
svg存放位置
3、再components中新建組件svg_icon.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</template>
<script>
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: { // 計(jì)算屬性
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>4、再 assets/svg_icon中新建index.js
import Vue from 'vue'
import svgIcon from '@/components/svgIcon' // 引入剛才新建的svg組件
Vue.component('svg-icon', svgIcon) // 全局組件
const req = require.context('./svg', false, /\.svg$/) // ./svg，就是我們放svg圖標(biāo)的文件名
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)5、再vue.config.js中配置svg-sprite-loader
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/assets/svg_icon')) // index.js 的路徑
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/svg_icon')) // index.js 的路徑
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},6、再main.js中引用
import '@/assets/svg_icon'
7、vue文件中使用
<svg-icon icon-class="notification"></svg-icon>
說明：notification為下載的svg文件名稱
總結(jié)
這個(gè)方法我已經(jīng)測試過了，肯定有效無意
以上就是vuecli4插件svg-sprite-loader使用svg圖標(biāo) 的詳細(xì)內(nèi)容，更多關(guān)于vuecli4插件svg-sprite-loader的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue--keep-alive使用實(shí)例詳解,keep-alive標(biāo)簽主要用于保留組件狀態(tài)或避免重新渲染，用示例代碼介紹Vue的keep-alive的用法，需要的朋友可以參考下2022-08-08
mpvue微信小程序開發(fā)之實(shí)現(xiàn)一個(gè)彈幕評論
這篇文章主要介紹了mpvue小程序開發(fā)之 實(shí)現(xiàn)一個(gè)彈幕評論功能，本文通過實(shí)例講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue源碼中的makeMap用在很多地方，主要是判斷標(biāo)簽是原生標(biāo)簽還是用戶自定義的組件，但是標(biāo)簽很多，如果每判斷一次都執(zhí)行一次循環(huán)，累計(jì)下來，性能損耗還是很大的，makeMap就是解決這個(gè)問題出現(xiàn)的2022-08-08
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers自定義軌跡動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識,包括ref屬性，props配置項(xiàng)及mixin混入的方式，本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能
這篇文章主要介紹了Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進(jìn)度功能,本通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了Vue拖拽排序組件Vue-Slicksort，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了DataV?全屏容器組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04