版本

"vue": "^3.2.47",
"vite": "^4.1.4",
"vite-plugin-svg-icons": "^2.0.1"

件使用方式

安装插件

cnpm i vite-plugin-svg-icons -D

修改 vite.config.js 配置文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置全局加载svg图标为组件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 添加以下6行，并根据自己需求进行配置
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/plugins/svg-icon/svgs')],
      // 指定symbolId格式
      symbolId: '[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在 src/icons/ 目录下新建 SvgIcon.vue ，并添加如下内容

使用了setup语法糖写法

<template>
  <svg class="svg-icon" aria-hidden="true" :width="width" :height="height">
    <use :xlink:href="symbolId" :fill="fill" />
  </svg>
</template>

<!-- SvgIcon组件，可将svg图标直接当组件使用 -->
<script setup>
import { defineProps, computed } from 'vue'

/**
 * 输入属性             类型                默认值              是否必选                描述
 *  name              string             undefined              是                  svg图标名字
 *  width             number                19                  否                  svg图标宽度
 *  height            number                19                  否                  svg图标高度
 *  fill              string              #ffffff               否                  svg图标填充颜色
 */


const props = defineProps({
  name: {
    type: String,
    required: true
  },
  width: {
    type: Number,
    default: 19
  },
  height: {
    type: Number,
    default: 19
  },
  fill: {
    type: String,
    default: '#ffffff'
  }
})

// 获取svg图标名称，需要和vite.config.js中的配置保持一致
const symbolId = computed(() => `#${props.name}`)
</script>

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

在 src/icons/ 目录下新建 svg文件夹，并将需要用到的svg图标放入其中

image.png

import SvgIcon from './SvgIcon.vue'
import 'virtual:svg-icons-register'
/**
 * Svg图标插件
 */

export default {
  install: (app) => {
    // 注册全局组件
    app.component('svg-icon', SvgIcon)
  }
}

全局注册 SvgIcon 组件，在 main.js 中新增

import svgIcon from './icons';
....
const app = createApp(App);
app.use(svgIcon);