vite 动态导入SVG的几种形式

vite 动态导入SVG的几种方式，和区别点。

一基于Import导入

缺点：无法被img标签解析，需要使用动态组件加载，适合单个导入批量导入需要写很多次。

优点：可以通过CSS动态修改SVG的描边和填充

页面结构：

代码展示：

<template>
  <div class="test">
    <component :is="icon" />
  </div>
</template>

<script setup lang="ts">
import icon from "@/assets/home/h-3.svg";
</script>

二使用url配合import导入

优点：方便简洁，可以被img解析，但无法被动态组件识别，适合单个或多个。

缺点：无法通过css动态修改颜色

页面展示结构：

代码展示：

<template>
  <div class="test">
    <img :src="icon" alt="">
  </div>
</template>

<script setup lang="ts">
const icon = new URL("/src/assets/home/h-3.svg", import.meta.url).href;
</script>

三使用glob动态导入

优点：适合批量导入支持各种类型的文件，配合动态组件实现动态渲染。

缺点：会全量导入对应的文件

代码展示：

// 导入home目录下所有的jjfa开头的SVG文件
const iconModules = import.meta.glob(
  "../../../assets/home/*.svg", 
  { eager: true, import: "default" }
) as Record<string, string>;

// 导入ls目录下所有的png图片
const lsIcon = import.meta.glob(
  "../../../assets/ls/*.png", 
  { eager: true, import: "default" }
) as Record<string, string>;

const defaultChildren: IData[] = [
  {

    icon: iconModules["../../../assets/home/jjfa-hhy.svg"],

    association: [
      {name: "混合云", icon: lsIcon["../../../assets/ls/icon-1.png"]},
      {name: "物理服务器", icon: lsIcon["../../../assets/ls/icon-2.png"]},
      {name: "私有云", icon: lsIcon["../../../assets/ls/icon-3.png"]},
    ],
  },
  {

    icon: iconModules["../../../assets/home/jjfa-jr.svg"],

    association: [
      {name: "金融", icon: lsIcon["../../../assets/ls/icon-1.png"]},
      {name: "物理服务器", icon: lsIcon["../../../assets/ls/icon-2.png"]},
      {name: "私有云", icon: lsIcon["../../../assets/ls/icon-3.png"]},
    ],
  }
]

四使用img标签导入

优点：简单高效，可以使用CSS控制大小

缺点：需要把svg图片放在public目录下，无法修改svg的填充色或描边

代码展示：

<img src="/test.svg" >

一 基于Import导入

一基于Import导入