vue3 svg-sprite-loader

1.npm install svg-sprite-loader -D

2.注册全局组件

import SvgIcon from "@/components/svgIcon/Index.vue";

const app = createApp(App)

app.component('svg-icon',SvgIcon)

3.页面引入组件

<svg-icon></svg-icon>

4.下载一些svg 图片

5.新建svg.js 文件

//  获取当前svg目录所有为.svg结尾的文件

const req = require.context('./icon', false, /\.svg$/)

// 解析获取的.svg文件的文件名称，并返回

const requireAll = requireContext => {

return requireContext.keys().map(requireContext)

}

requireAll(req)

console.log('----------------')

console.log(requireAll(req))

6把svg.js 引入main.js文件

import "./components/svgIcon/svg.js";

7修改vue.config.js文件

chainWebpack:(config) => {

config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,

config.module

.rule('svg-sprite-loader')

.test(/\.svg$/)

.include

.add(resolve('src/components/svgIcon/icon')) //处理svg目录

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

})

},

8.在全局组件测试

<svg class="svg-icon">

<use href="#icon-home" />

</svg>