如何在Svelte中动态导入SVG文本文件？

Vite 无法分析完全由运行时生成的动态导入路径，因为它需要在构建阶段明确要打包的文件范围。以下两种方案可以解决你的问题：

方法一：使用 Vite Glob 预加载所有 SVG 文件 #

这种方式会在组件初始化时一次性加载所有目标 SVG 文件，适合文件数量不多（如你的50个）的场景：

<script>
export let src;
export let hex;

// 预加载指定目录下所有 SVG 文件的原始内容
const svgMap = import.meta.glob('/src/lib/svg/*.svg?raw', { eager: true });

// 根据传入的 src 匹配对应的 SVG 内容
$: svgContent = svgMap[`/src/lib/svg/${src}.svg?raw`]?.default || '';
</script>

<!-- 渲染 SVG 内容并应用颜色样式 -->
<div style="color: {hex}">{@html svgContent}</div>

方法二：带静态前缀的动态导入 #

如果希望按需加载 SVG 文件（仅当 src 变化时才加载对应文件），可以使用带有静态前缀的动态导入，让 Vite 能识别需要打包的文件范围：

<script>
export let src;
export let hex;
let svgContent = '';

// 动态加载指定 SVG 文件
async function loadSvg(targetSrc) {
  try {
    const module = await import(`/src/lib/svg/${targetSrc}.svg?raw`);
    svgContent = module.default;
  } catch (err) {
    console.error(`加载 SVG 失败: ${targetSrc}`, err);
    svgContent = '';
  }
}

// 当 src 变化时重新加载 SVG
$: if (src) {
  loadSvg(src);
}
</script>

{#if svgContent}
  <div style="color: {hex}">{@html svgContent}</div>
{:else}
  <div>SVG 加载中...</div>
{/if}

原方法报错原因 #

你通过 new URL 生成的文件路径是纯运行时动态生成的，Vite 无法在构建阶段识别这些路径对应的文件，因此无法将它们纳入打包范围，导致动态导入失败。上述两种方案都给了 Vite 明确的文件匹配规则，让它能提前处理需要打包的 SVG 文件。

内容的提问来源于stack exchange，提问作者David Berndt