Vue3+ts项目中使用svg-sprite-loader处理svg，vue3项目中使用svg

1.首先插件依赖安装

npm i svg-sprite-loader

2.loader配置,在vue.config.js中配置

*主要是chainWebpack和configureWebpack中的配置（所有的svg图片放在src/assets/svg文件夹中）

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: function (config) {
    config.module.rule('svg').exclude.add(path.resolve(__dirname, './src/assets/svg')).end()
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: path.resolve(__dirname, './src/assets/svg'),
          options: { symbolId: 'icon-[name]' }
        }
      ]
    }
  },
});

3.在components创建SvgIcon.vue组件

<template>