Vue3+cli 如何利用包来 导入svg svg-sprite-loader

因为之前很多时候都是通过 来管理格式的图标，但是未免也有不稳定的时候，通过vue3 svg-- 来管理svg 同样也很方便

需求：

将ui发送的svg文件应用到页面上，vue 如何解析svg文件

使用步骤： 1、安装插件

npm install svg-sprite-loader --save-dev

2、新建存放svg目录地址

方便后面演示内容，在此处固定一个目录地址，可以根据自己的习惯进行调整，并对后面代码进行修改

3、创建.vue：

4、在同级目录下创建index.js

写法为V3 写法，v2 不适用，修改即可

const requireAll = requireContext => requireContext.keys().map(requireContext)import Svgicon from './Svgicon.vue'
// 如果不需要深层查找则修改为false即可
const req = require.context('./svg', true, /\.svg$/)
export default {install(app) {requireAll(req);app.component('svg-icon', Svgicon)   // 挂载在全局}
}

5、配置 vue..js:

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {return path.join(__dirname, '.', dir)
}
module.exports = defineConfig({transpileDependencies: true,chainWebpack: config => {config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,config.module.rule('svg-sprite-loader').test(/\.svg$/).include.add(resolve('src/icons')) //处理svg目录.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})},
})

6、在main.js 中引入刚才创建的index.js

import svg from './icons/index'
// ......
createApp(App).use(store).use(svg)//.......

7、使用