vue项目中使用svg图标/插件svg-sprite-loader

项目中为了体验好、性能优、资源丰富等原因经常会用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-word
  css:{
    loaderOptions:{
      scss:{
        additionalData:`@import "~@/styles/theme.scss";`
      }
    }
  },
//注意此处
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve('src')
      }
    }
  },
//注意此处
  chainWebpack: (config) => {
    // 配置 svg-sprite-loader
    config.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>
     <svg
         className="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>