优雅使用svg组件

背景：vue3+vite框架

代码：

createSvgIconsPlugin({
        customDomId: "agents-app-svgs-id",
        iconDirs: [
          path.resolve(process.cwd(), 'src/assets/svgs'),
        ],
        // 指定symbolId格式
        symbolId: '[name]',
      })

 SvgIcon组件

<template>
  <svg :width="width" :height="height" :style="{ color: fill }">
    <use :xlink:href="symbolId" :fill="fill" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = withDefaults(
  defineProps<{
    name: string;
    width?: number | string;
    height?: number | string;
    fill?: string;
  }>(),
  {
    width: 18,
    height: 18,
    fill: '#ffffff',
  }
);

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

<style scoped lang="scss">
svg:active,
svg:hover,
svg:focus,
svg:visited,
svg:focus-within,
svg:focus-visible,
svg:target {
  outline: none !important;
}
</style>

问题：这样使用对于assets/svgs下面的svg图片没有任何问题，但是随着项目规模变大，svg图片也会增多，这时候为了避免重名，很容易想到，通过不同的文件夹来存储，然而问题也随之出现，处于子文件夹下的图片展示不了

解决：直接上代码，只需修改下vite中的配置就ok了

createSvgIconsPlugin({
        customDomId: "agents-app-svgs-id",
        iconDirs: [
          path.resolve(process.cwd(), 'src/assets/svgs/assistant-svgs'),
          path.resolve(process.cwd(), 'src/assets/svgs'),
        ],
        // 指定symbolId格式
        symbolId: '[name]',
      })

    Notice:  此处的assistant-svgs是一个新的文件夹，如果有其余的，继续添加就可以

    Advice:  当有多个文件夹时，将子集文件夹写在前面，可以避免图片被覆盖而导致加载失败的问题，

目前先这样吧，有什么好的方法，欢迎评论，一起探讨，一起进步！！！