vue3+ts+vite最新快速集成svg

1、使用 vite-plugin-svg-icons 依赖

npm i vite-plugin-svg-icons -D

2、在 main.ts 中引入依赖

import 'virtual:svg-icons-register'; 

3、在 vite.config.ts 中配置插件参数

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹，地址可改
            iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]'
        })
    ]
})

4、写一个公共组件 svg-icon.vue 并引入项目

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

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    size: {
      type: [String, Number],
      default: 20
    }
  },
  setup(props) {
    const iconName = computed(() => `#icon-${props.iconClass}`);
    const width = computed(() => {
      if (props.size < 0 || isNaN(props.size)) {
        return 20;
      }
      return props.size;
    });
    const height = computed(() => {
      if (props.size < 0 || isNaN(props.size)) {
        return 20;
      }
      return props.size;
    });
    const svgClass = computed(() => {
      if (props.className) {
        return 'svg-icon ' + props.className;
      } else {
        return 'svg-icon';
      }
    });
    return { iconName, width, height, svgClass };
  }
});
</script>
<style scoped>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

import SvgIcon from './components/svg-icon.vue';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)
app.component(SvgIcon.name || '', SvgIcon);

到此组件就配好了，我们在 vite.config.ts 中配置的访问 svg 的路径是 src/assets/svg ，因此我们把svg图标放在这个目录底下，比如放了一个 test.svg 图标，我们就可以在项目中通过如下方法使用

<svg-icon icon-class="test" size="50"></svg-icon>