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
每次使用一次插件，總會(huì)遇到各種各樣的坑，npm上面的文檔說明老舊，網(wǎng)絡(luò)上的文章總是字?jǐn)?shù)滿滿，內(nèi)在無比空虛，各種復(fù)制粘貼。我這個(gè)是使用vuecli4版本中使用svg-sprite-loader，廢話不都說，一起來看看滿滿的干貨
首先看下效果，避免方法的不正確性
效果圖
1、先從阿里圖標(biāo)庫(kù)中下載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)測(cè)試過了，肯定有效無意
以上就是vuecli4插件svg-sprite-loader使用svg圖標(biāo) 的詳細(xì)內(nèi)容，更多關(guān)于vuecli4插件svg-sprite-loader的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下2023-03-03
Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能
這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue實(shí)現(xiàn)導(dǎo)出word文檔的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何使用第三方庫(kù)file-saver和html-docx-js實(shí)現(xiàn)導(dǎo)出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本文主要介紹了vue-class遷移vite的一次踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vuex是一個(gè)專為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下2021-08-08