Vue3+Ts使用svg

1. 先下载svg-sprite-loader

2. 封装Icon组件

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

<script lang="ts">
import {computed, defineComponent} from 'vue'
export default defineComponent({
    name:'Icon',
    props:{
        iconClass:{
            type: String,
            required: true,
        },
        className: {
            type: String,
            default: '',
        }
    },
    setup(props){
        const iconName=computed(()=>{return `#icon-${props.iconClass}`})
        const svgClass = computed(()=>{
            if(props.className){
                return 'svg-icon'+props.className
            }else{
                return 'svg-icon'
            }
        })
        return {
            iconName,
            svgClass
        }

    }

})
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>

3. 全局引用Icon组件 main.ts:

import { createApp} from 'vue'
import App from './App.vue'
import router from "./router"
import Icon from '@/components/Icon.vue'
const req = require.context("./assets/svg",false,/\.svg$/)
const requireAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext)
requireAll(req)
//requireAll(req)
createApp(App)
    .use(router)
    .component('Icon',Icon)
    .mount('#app')

4. 配置vue.config.cjs

const path = require('path')
module.exports = {
  lintOnSave: false,
  
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/svg') // icon存放路径
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/) //使用条件：.svg结尾的文件
      .include.add(dir).end()   //包含icons目录
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({extract: false,symbolId:'icon-[name]'}).end() //规定需要用svg-sprite-loader这个loader，extract: false表明，不要生成其他的文件
      
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir)  //其他目录的.svg文件，不需要用到以上规则
  }
}