本文章將演示如何在vue3項(xiàng)目中如何使用svg圖標(biāo)，所使用方法不懂請自行搜索柴淘，如有不對請多指出馏锡。
1.文件下新建SvgIcon文件夾以及子文件index.js，index.vue姆怪，svg文件夾（用于存放svg圖片）
2.編寫index.vue組件
<template>
??<svg?:class="svgClass"?aria-hidden="true">
????<use?:xlink:href="iconName"?/>
??</svg>
</template>
<script>
export?default?{
??name:?"SvgIcon",
??props:?{
????iconClass:?{
??????type:?String,
??????required:?true,
????},
????className:?{
??????type:?String,
??????default:?"",
????},
??},
??computed:?{
????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>
3.index.js
//下面這個(gè)是導(dǎo)入svgIcon/svg下的所有svg文件
const?requireAll?=?requireContext?=>?requireContext.keys().map(requireContext)
??const?req?=?require.context('./svg',?false,?/\.svg$/)?
??console.log("REQ",????requireAll(req))
??/*
???第一個(gè)參數(shù)是:'./svg'?=>?需要檢索的目錄，
???第二個(gè)參數(shù)是：false?=>?是否檢索子目錄,
???第三個(gè)參數(shù)是:?/\.svg$/?=>?匹配文件的正則
??*/
??requireAll(req);
打印如下說明引入svg資源成功澡绩，如果不是檢查vue.config.js配置是否生效（關(guān)于配置下面會(huì)講到）
4.main.js中引入并全局注冊
import?{createApp}?from?'vue'
import?App?from?'./App.vue'
import?router?from?'./router'
import?store?from?'./store'
import?installElementPlus?from?'./plugins/element'
import?'./assets/css/icon.css'
const?app?=?createApp(App)
installElementPlus(app)
import?'@/SvgIcon/index.js'
import?SvgIcon?from?'@/SvgIcon/index.vue'//?svg組件
app.component('svg-icon',?SvgIcon)
5..安裝svg-sprite-loader
npm install svg-sprite-loader --save-dev
6.配置vue.congfig.js
??chainWebpack:?(config)?=>?{
????????//配置?svg-sprite-loader
????????//?第一步：讓其他svg?loader不要對src/icons進(jìn)行操作
????????config.module
??????????.rule('svg')
??????????.exclude.add(resolve('src/SvgIcon/svg'))//注意：路徑要具體到存放的svg的路徑下稽揭，不然會(huì)報(bào)錯(cuò)
??????????.end()
????????//?第二步：使用svg-sprite-loader?對?src/icons下的svg進(jìn)行操作
????????config.module
??????????.rule('icons')
??????????.test(/\.svg$/)
??????????.include.add(resolve('src/SvgIcon/svg'))//注意：路徑要具體到存放的svg的路徑下，不然會(huì)報(bào)錯(cuò)
??????????.end()
??????????.use('svg-sprite-loader')
??????????.loader('svg-sprite-loader')
??????????//定義規(guī)則?使用時(shí)?<svg?class="icon">?<use?xlink:href="#icon-svg文件名"></use>??</svg>
??????????.options({
????????????symbolId:?'icon-[name]'
??????????})
??????????.end()
??????}
7.在頁面內(nèi)直接使用 svg-icon
??<svg-icon?icon-class="d"?/>
d：svg文件名稱
