Detailed explanation of the process of encapsulating the svg icon component in vite+vue3 project

npm i vite-plugin-svg-icons -D

// 
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";
export default defineConfig({
  plugins: [
    // Svg icon configuration item    createSvgIconsPlugin({
      // Specify the icon folder that needs to be cached      iconDirs: [((), "src/assets/icons")],
      // Specify the symbolId format      symbolId: "icon-[dir]-[name]",
    }),
    // ------ Other configuration items ------  ],
});

// src/
import 'virtual:svg-icons-register'

// src/components/
<template>
    <svg aria-hidden="true" :style="{
        width: width + 'px',
        height: height + 'px'
    }">
        <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
    </svg>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
    prefix: {
        type: String,
        default: 'icon',
    },
    name: {
        type: String,
        required: true,
    },
    color: {
        type: String,
        default: 'currentColor',
    },
    width: {
        type: [Number, String],
        default: '24',
    },
    height: {
        type: [Number, String],
        default: '24',
    },
})
const symbolId = computed(() => `#${}-${}`);
</script>

# src/assets/icons
- 
- 
- 
- dir/

<template>
<!-- color No value passed svgColors inherit the superior elementscolorAttribute value -->
<svgIcon name="mine" color="#333" width="36" height="36"></svgIcon>
</template>
<script setup>
import svgIcon from "@/components/"
</script>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1"  xmlns="http:///2000/svg" xmlns:xlink="http:///1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;} // This is here to change this #ffffff to "" or "currentColor".</style>
  <path class="st0"
    d="M912.051527 151.150632l-286.624817 780.499041c-5.753719 15.667798-23.118384 23.704707-38.786182 17.950989a30.220937 30.220937 0 0 1-19.305944-22.909364L498.23787 550.442426a30.220937 30.220937 0 0 0-24.265655-24.265655L97.723343 457.080057c-16.415729-3.014425-27.279412-18.766366-24.264987-35.182094a30.220937 30.220937 0 0 1 19.306612-22.910032L873.263342 112.363782c15.669134-5.753719 33.033799 2.28319 38.786849 17.951656a30.220937 30.220937 0 0 1 0 20.835194zM826.833582 205.907791a7.555234 7.555234 0 0 0-9.679684-9.650301l-573.559491 207.092476a7.555234 7.555234 0 0 0 1.149942 14.527205l297.554613 56.790594a7.555234 7.555234 0 0 1 6.020837 6.087616L603.515031 788.626754a7.555234 7.555234 0 0 0 14.549911 1.210044L826.83425 205.908459z" />
</svg>;