svg-icon组件（vite5+vue3）1.安装插件 2.创建目标文件夹，存放本地的svg 3.创建svg组件分析

1.安装插件

npm i fast-glob@3.2.11 -D
npm i vite-plugin-svg-icons@2.0.1 -D

2.创建目标文件夹，存放本地的svg

3.创建svg组件

分析：svg组件主要有两个属性，svg的名字，svg的样式。名字由组件的props的name决定，样式有多种思路去创建props，依据情况而定。

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 显示的 svg 图标名称（剔除 icon-）
  name: {
    type: String,
    required: true
  },
  // 直接指定 svg 图标的颜色
  color: {
    type: String
  },
  // 通过 tailwind 指定 svg 颜色的类名
  fillClass: {
    type: String
  }
})
// 真实显示的 svg 图标名（拼接 #icon-）
const symbolId = computed(() => `#icon-${props.name}`)
</script>

<template>
  <svg aria-hidden="true">
    <use
      :class="fillClass"
      :xlink:href="symbolId"
      :fill="color"></use>
  </svg>
</template>

<style scoped></style>

4.vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [
        path.resolve(process.cwd(), 'src/assets/icons')
      ],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    })
  ],
  resolve: {
    alias: {
      '@': '/src' // 指向你的源代码目录
    }
  },

})

5.在main.js引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store/index'
import mLibs from './libs/index'
import 'virtual:svg-icons-register'
import { useREM } from './utils/flexible'
useREM()
const app = createApp(App)
app.use(store)
app.use(router)
app.use(mLibs)
app.mount('#app')

6.使用svg-icon组件

 <m-svg-icon fillClass="w-[36] h-[36]" name="hamburger"></m-svg-icon>