vue3.2 引入svg图像

1. src/icons/svg-------->你需要的svg图标
2. src/components------->创建 SvgIcon/index.vue（相当于创建一个组件）

   <template>
     <svg class="svg-icon" aria-hidden="true">
       <use :xlink:href="iconName"></use>
     </svg>
   </template>
   
   <script setup>
   import { defineProps, computed } from 'vue'
   const props = defineProps({
     icon: {
       type: String,
       required: true
     }
   })
   
   const iconName = computed(() => {
     return `#icon-${props.icon}`
   })
   </script>
   <style scoped>
   .svg-icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>
   

3. 创 src/icons/index.js ------->将svg图标抛出引用（将svg和那个组件抛出）

   // 组件
   import SvgIcon from '@/components/SvgIcon'
   
   // svg
   // 三个参数：引入资源的目录 是否需要便利子目录 匹配文件的规则
   const svgRequired = require.context('./svg', false, /\.svg$/)
   // svgRequired.keys()返回的是路径的数组，forEach遍历每个路径
   svgRequired.keys().forEach((item) => svgRequired(item))
   
   // 将组件全局引入
   export default (app) => {
     app.component('svg-icon', SvgIcon)
   }
   

4. main.js引入svg

   import SvgIcon from '@/icons'
   const app = createApp(App)
   SvgIcon(app)

5. 安装loader

   npm i --save-dev svg-sprite-loader@6.0.9

6. 修改webpack配置

   const path = require('path')
   function resolve(dir) {
     return path.join(__dirname, dir)
   }
   const webpack = require('webpack')
   module.exports = {
     chainWebpack(config) {
       // 设置 svg-sprite-loader
       // config 为 webpack 配置对象
       // config.module 表示创建一个具名规则，以后用来修改规则
       config.module
         // 规则
         .rule('svg')
         // 忽略
         .exclude.add(resolve('src/icons'))
         // 结束
         .end()
       // config.module 表示创建一个具名规则，以后用来修改规则
       config.module
         // 规则
         .rule('icons')
         // 正则，解析 .svg 格式文件
         .test(/\.svg$/)
         // 解析的文件
         .include.add(resolve('src/icons'))
         // 结束
         .end()
         // 新增了一个解析的loader
         .use('svg-sprite-loader')
         // 具体的loader
         .loader('svg-sprite-loader')
         // loader 的配置
         .options({
           symbolId: 'icon-[name]'
         })
         // 结束
         .end()
       config
         .plugin('ignore')
         .use(
           new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
         )
       config.module
         .rule('icons')
         .test(/\.svg$/)
         .include.add(resolve('src/icons'))
         .end()
         .use('svg-sprite-loader')
         .loader('svg-sprite-loader')
         .options({
           symbolId: 'icon-[name]'
         })
         .end()
     }
   }