项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。
svg有以下优点：

svg放大不失真,png，jpg会出现失真现象
svg的体积非常小，对有大量图标图片的页面体验友好
图像文件可读，易于修改和编辑
svg文件还可嵌入JavaScript脚本来控制svg对象

node版本:v14.19.0    svg-sprite-loader版本:6.0.11

1.安装svg-sprite-loader

 npm install svg-sprite-loader

2、webpack 配置（vue.config.js）

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = defineConfig({publicPath: './',outputDir: 'baseData',assetsDir: 'assets',productionSourceMap: false,transpileDependencies: true,lintOnSave:false,//为了解决 Component name "index" should always be multi-wordcss:{loaderOptions:{scss:{additionalData:`@import "~@/styles/theme.scss";`}}},
//注意此处configureWebpack: {resolve: {alias: {'@': path.resolve('src')}}},
//注意此处chainWebpack: (config) => {// 配置 svg-sprite-loaderconfig.module.rule("svg").exclude.add(resolve("src/assets/svg")).end();config.module.rule("icons").test(/\.svg$/).include.add(resolve("src/assets/svg")).end().use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId: "icon-[name]",}).end();}
})

注意：这里的chainWebpack对象是跟devServer是平级的对象

3、创建、注册和导出svg的组件

1. 创建svg组件：在components下创建了svg组件文件夹

   <template><svgclassName="svg-icon"aria-hidden="true":style="{ width: width, height: height }"><use :xlink:href="iconName" /></svg>
   </template><script>
   export default {props: {iconClass: {type: String,required: true,},width: {type: String,default: "16px",},height: {type: String,default: "16px",},},computed: {iconName() {return `#icon-${this.iconClass}`;},},
   };
   </script>
   

2. 注册svg组件：在assets下创建目录svg,其中index.js为注册(将所有的svg放在同级目录下)

   import Vue from "vue";
   import SvgIcon from "@/components/SvgIcon"; // svg component// register globally
   Vue.component("SvgIcon", SvgIcon);const req = require.context("@/assets/svg", false, /\.svg$/);
   const requireAll = (requireContext) =>requireContext.keys().map(requireContext);
   requireAll(req);
   

3. main.js中引入

   import "@/assets/svg/index";//自定义svg图标

4. 组件中使用(iconClass的名字,就是svg的文件名)

   <SvgIcon :iconClass="'help'" class="svg-icon" height="14px" width="14px"/></MyTooltip>