使用@svelte-put/preprocess-inline-svg时如何读取变量值而非变量名？

问题原因 #

@svelte-put/preprocess-inline-svg是编译阶段工作的预处理器，它会在代码编译时解析data-inline-src的属性值。你用<svg data-inline-src=${realIconList[3]} />时，编译阶段插件只能看到字符串${realIconList[3]}，而非变量运行时的实际值，所以会提示找不到对应SVG文件。

解决方案 #

根据你的图标列表是否为静态（编译时已知），可以用以下两种方式处理：

方案1：静态图标列表（编译时确定所有图标）

把需要的SVG文件以原始文本形式导入，建立名称到内容的映射，运行时直接通过映射获取内容并渲染：

<script>
  // 按实际路径导入SVG，?raw后缀让Vite返回原始文本
  import iconHome from '$lib/icons/home.svg?raw';
  import iconUser from '$lib/icons/user.svg?raw';
  import iconSettings from '$lib/icons/settings.svg?raw';

  // 建立图标名称与内容的映射表
  const iconMap = {
    'home.svg': iconHome,
    'user.svg': iconUser,
    'settings.svg': iconSettings,
  };

  const realIconList = ['home.svg', 'user.svg', 'settings.svg'];
</script>

<!-- 使用{@html}插入SVG内容 -->
<div {@html iconMap[realIconList[3]]} />

方案2：动态图标列表（运行时才确定图标）

如果图标列表是动态获取的（比如从接口拉取），需要用动态导入加载对应SVG：

<script>
  import { onMount } from 'svelte';
  
  let iconContent = '';
  const realIconList = ['home.svg', 'user.svg', 'settings.svg'];

  // 动态加载指定图标
  async function loadIcon(iconName) {
    const module = await import(`$lib/icons/${iconName}?raw`);
    iconContent = module.default;
  }

  // 组件挂载后加载目标图标
  onMount(() => {
    loadIcon(realIconList[3]);
  });
</script>

{#if iconContent}
  <div {@html iconContent} />
{/if}

备选方案：SVG组件化

把每个SVG转成Svelte组件，用动态组件方式渲染：

<script>
  import { onMount } from 'svelte';
  
  let IconComponent;
  // 这里数组存组件名称（比如Home对应Home.svelte）
  const realIconList = ['Home', 'User', 'Settings'];

  onMount(async () => {
    const module = await import(`$lib/icons/${realIconList[3]}.svelte`);
    IconComponent = module.default;
  });
</script>

{#if IconComponent}
  <svelte:component this={IconComponent} />
{/if}

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