vue3中使用svg，没有使用ts

1，首先下载依赖

cnpm install --save-dev svg-sprite-loader
cnpm install --save-dev svgo
cnpm install --save-dev svgo-loader

2，然后在根目录下的vue.config.js中进行配置。 

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

 chainWebpack: config => {
    if(!isDev){
      // config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
      //   {
      //     analyzerMode: 'static'
      //   }
      // ])
      config.plugin('html').tap(args => {
        // 生产环境或本地需要cdn时，才注入cdn
        args[0].cdn = cdn
        return args
      })
    }
    // 给svg规则增加⼀个排除选项
  config.module
  .rule('svg')
  .exclude.add(path.resolve(__dirname, './src/icons/svg'))

// 新增icons规则，设置svg-sprite-loader处理icons⽬录中的svg
config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(path.resolve(__dirname, './src/icons/svg'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({ symbolId: 'icon-[name]' })
  .end()
  .use('svgo-loader')
  .loader('svgo-loader')
  },

 3.在components中写一个svg组件

路径是components/SvgIcon/index.vue

路径尽量写一样，不一样的注意配置是修改为自己的路径

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { computed ,defineProps} from 'vue';
const props=defineProps({
     iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
})
const iconName = computed(()=>{
  return `#icon-${props.iconClass}`
})
const svgClass = computed(()=>{
  if (props.className) {
        return 'svg-icon ' + props.className
      } else {
        return 'svg-icon'
      }
})
</script>

<style scoped>
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4.写svg存放地址以及配置文件

在src下新建icons文件，在下创建svg文件用来存放svg图片，同级创建index.js

index.js

// 获取当前目录所有为.svg的文件
const req = require.context("./svg", false, /.svg$/)

// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{
    return requireContext.keys().map(requireContext)
}
requireAll(req)

 5.然后在main.js中全局配置

import './icons' // icon
// 在main.js配置对应的组件，不能在index.js中进行配置，不然会出现空白

const app = createApp(App)
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
app.component('svg-icon', SvgIcon)

6.最在组件中使用

<svg-icon icon-class="recyclable" style="width:100%;height:100%"></svg-icon>