vue3+vue-cli4中使用svg的方式詳解(親測(cè)可用)
技術(shù)棧：vue3+vue-cli4
前言：
目前大多數(shù)是基于vue2引入，所以想基于vue3需要做一些改動(dòng)（注意該方法是基于vue-cli中使用的，因?yàn)閣ebpack提供了require.context()，基于vite構(gòu)建的項(xiàng)目則不能使用該文章提供的方法）
一、安裝 svg-sprite-loader
npm install svg-sprite-loader --save-dev
二、在src/components/svgIcon下新建組件index.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</template>
<script>
import { computed } from "@vue/reactivity";
export default {
name: "baseSvgIcon",
props: {
iconClass: { type: String },
className: { type: String },
},
setup(props) {
const iconName = computed(() => {
return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
});
const svgClass = computed(() => {
return props.className ? "svg-icon " + props.className : "svg-icon";
});
return { iconName, svgClass };
},
};
</script>
<style scoped lang="scss">
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
三、在assets在創(chuàng)建icons文件夾
imgs文件夾里含一個(gè)svg文件夾，放svg格式文件，以及一個(gè)index.js文件，該文件內(nèi)容如下
// 獲取當(dāng)前目錄所有為.svg的文件
const req = require.context('./svg', false, /\.svg$/)
// 解析獲取的.svg文件的文件名稱并返回
const requireAll = (requireContext) =>{
return requireContext.keys().map(requireContext)
}
requireAll(req)
四、在src同級(jí)下創(chuàng)建vue.config.js進(jìn)行配置
經(jīng)評(píng)論區(qū)總結(jié)，如果是在非vue-cli4的項(xiàng)目中，在config.module.rules.delete("svg");報(bào)錯(cuò)的話，可以嘗試使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();替換該語(yǔ)句
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); // 重點(diǎn)：刪除默認(rèn)配置中處理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/imgs')) // 處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
};
五、在main.js里引入，以及做一些小修改
此處注意，將組件注冊(cè)放到main.js里。不然會(huì)報(bào)[Vue warn]: Failed to resolve component: svg-icon的問(wèn)題，預(yù)測(cè)為父組件先創(chuàng)建完了而子組件還沒(méi)創(chuàng)建進(jìn)去，導(dǎo)致該問(wèn)題的出現(xiàn)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'
const app = createApp(App)
import SvgIcon from '@/components/svgIcon'
app.component('svg-icon', SvgIcon)
app.use(store).use(router).mount('#app')
六、在頁(yè)面中使用
<div class="topLeft"> <svg-icon icon-class="category"></svg-icon> </div> <div class="topCenter"></div> <div class="topRight"> <svg-icon icon-class="search"></svg-icon> </div>
七、文件目錄結(jié)構(gòu)及其效果展示
八、參考鏈接地址
1、如果是vue2進(jìn)行使用的可以參考該文章：https://www.jianshu.com/p/cb67bb4a79f2
2、我看到過(guò)的另一種解決思路，將index.js文件里的內(nèi)容放入到main.js里，但我覺(jué)得分開層次更清晰，該解決方案在該文章的評(píng)論里：https://zhuanlan.zhihu.com/p/335107384
3、在vite中使用svg的可以參考我另一篇文章：http://m.fzitv.net/article/258650.htm
4、評(píng)論區(qū)里有人成功了，我上傳一版demo放到gitee里了，有問(wèn)題的地方大家可以對(duì)照看看：https://gitee.com/zasulan/csdn-item/tree/master/vue-music-app，重新上傳了一版無(wú)node-scss的版本，因?yàn)榇蠹业膎ode版本或者vue-cli版本可能不一致，npm install會(huì)報(bào)錯(cuò)因此去除，有需要可自行安裝
總結(jié)
到此這篇關(guān)于vue3+vue-cli4中使用svg的文章就介紹到這了,更多相關(guān)vue3+vue-cli4使用svg內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue無(wú)法加載文件C:\xx\AppData\Roaming\npm\vue.ps1系統(tǒng)禁止運(yùn)行腳本
這篇文章主要介紹了vue?:?無(wú)法加載文件?C:\xx\AppData\Roaming\npm\vue.ps1...系統(tǒng)上禁止運(yùn)行腳本問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本文主要介紹了vuex刷新頁(yè)面丟失登錄token信息的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue3通過(guò)hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái),放到單獨(dú)的js文件中,或者說(shuō)是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過(guò)hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下2024-10-10
本文通過(guò)實(shí)例代碼給大家介紹了Vue axios配置,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
mpvue是一個(gè)使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了Vues實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)
這篇文章主要為大家介紹了Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08