Vue+Vite项目封装 svg 组件，使用阿里巴巴矢量图标

一、装插件

// 1、先执行这条命令
npm i fast-glob -D
// 2、再执行这条命令
npm i vite-plugin-svg-icons -D

二、创建SVG组件

如图所示创建文件，并写入如下代码

<script setup lang="ts">
import { computed } from "vue";
 
const props = defineProps({
  iconClass: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: "",
  },
  iconColor: {
    type: String,
    default: "CurrentColor",
  },
});
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {
  if (props.className) {
    return "svg-icon " + props.className;
  } else {
    return "svg-icon";
  }
});
</script>
<template>
  <svg :class="svgClass" aria-hidden="true" :fill="iconColor">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<style scoped>
.svg-icon {
  // svg 图标默认宽高，根据个人使用情况自行调整
  width: 20px;
  height: 20px;
  fill: currentColor;
  overflow: hidden;
}
</style>

二、main.ts中全局注册

import { createApp } from 'vue'
import App from './App.vue'

// svg 相关
import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon/index.vue'

// 导入 pinia
import { createPinia } from 'pinia'
// 创建 pinia 实例
const pinia = createPinia()
app
  .component('svg-icon', SvgIcon)
  .use(pinia)
  .mount('#app');

三、来到 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

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

export default defineConfig({
  plugins: [
    vue(),
    // 修改 svg 相关配置
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(__dirname, './src/assets/svg')],
    })],
})

四、在代码中使用

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

五、注意点

若想修改 svg 的颜色，记得将 svg图片代码中的 fill属性删除删除

六、我如何使用svg

我平时用的比较多的就是 阿里巴巴矢量图库，具体操作如下动图。