背景

svg图片存放在assets/icons目录下面，并且目录下还有子目录，需要设计一个Icon组件，在使用Icon组件时显示svg图片

assets
  |-icons
      |--1.svg
      |--2.svg
      |--tags
           |-3.svg
           |-4.svg

Icon组件

<Icon :name="iconName" />

解决办法

1. 安装vite-svg-loader

   pnpm add vite-svg-loader -D
   

2. 配置vite.config.js的plugins选项

   import svgLoader from "vite-svg-loader";
   ...
   
   plugins: [svgLoader()],
   
   

3. 组件使用import.meta.glob懒加载icons目录下的所有svg

   <template>
     <component :is="currentComponent" />
   </template>
   <script lang="ts" setup>
       import { computed, defineProps } from "vue";
       import type { Component } from "vue";
       
       const { name } = defineProps(["name"]);
       const modules = import.meta.glob("../assets/**/*.svg", {
         as: "component",
         eager: true,
       });
   
       const currentComponent = computed(() => {
         const fileName = `/${name.toLowerCase()}.svg`;
         let findMod;
         for (const path in modules) {
           const mod = modules[path];
           if (path.endsWith(fileName)) {
             findMod = mod as Component;
             break;
           }
         }
         return findMod;
       });
   </script>