svg-icon

const path = require('path')

const resolve = dir => path.join(__dirname, '.', dir)
module.exports = {
 chainWebpack: (config) => {
	// 打包分析图
	config.module.rules.delete('svg');
	config.module.rule('svg-sprite-loader')
	 .test(/\.svg$/)
	 .include.add(resolve('src/assets/icons'))
	 .end()
	 .use('svg-sprite-loader')
	 .loader('svg-sprite-loader')
	 .options({
	  symbolId: 'icon-[name]'
     })
     .end()
 }
}

src/assets/icons文件夹包含index.ts和svg文件夹

// index.ts
/**
加载所有svg
@params app：整个应用的实例
**/
export function loadAllSvg() {
 const req = require.context('./svg', false, /\.svg$/);
 req.keys().map(req);
}

src/svg-icon文件夹

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

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

<style lang="less">
 .svg-icon{
  width:16px;
  height:16px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

配置使用svg格式的图片

// main.ts
const app: ReturnType<typeof createApp> = createApp(App)
import { loadAllSvg } from './assets/icons/index'
loadAllSvg()
import icon from "@/svg-icon/index.vue"
app.component('svg-icon', icon) 

使用

<svg-icon icon-class="icon-user" class="svg-class" />