动态导入的 SVG 图标不起作用

Question

• 我正在使用 svelte 5 / sveltekit 2
• 我有一个简单的示例，我从如下所示的 API 获取数据

    const itemsFromAPI = [
        { id: 1, symbols: ['btc', 'eth'] },
        { id: 2, symbols: ['xrp', 'xmr'] }
    ];

• 我想使用 这个库
渲染与每个符号对应的 SVG 图标
• 请记住，我很清楚他们有一个精简版本，但它已经 5 年没有更新了
• 我写了一个简单的 +page.svelte 文件，但它没有渲染

<script>
    const itemsFromAPI = [
        { id: 1, symbols: ['btc', 'eth'] },
        { id: 2, symbols: ['xrp', 'xmr'] }
    ];

    const handleIconChange = async (iconName) => {
        return await import(`/node_modules/cryptocurrency-icons/svg/color/${iconName}.svg?inline`);
    };
</script>

<h1>How to make dynamic crypto icons work here</h1>

{#each itemsFromAPI as item (item.id)}
    <div>
        <span>{item.id}</span>
        {#each item.symbols as symbol (symbol)}
            <span>{symbol}</span>
            <span>{@html handleIconChange(symbol)}</span>
        {/each}
    </div>
{/each}

• 这是 代码沙箱的链接，您可以在其中第一手看到问题
• 有什么想法可以让动态导入的 SVG 图标在 sveltekit 中工作吗？

Answer 1

该函数返回一个承诺，要在模板中使用它，您必须使用

#await

块，查询也需要

raw

说明符，否则您在导入图像时会得到一个URL（不确定是否

inline

对动态导入执行任何操作，因为它必须内联所有可能的文件）。

function handleIconChange(iconName) {
    return import(`/node_modules/cryptocurrency-icons/svg/color/${iconName}.svg?raw`);
};

<!-- Content will be the default export, import() returns the entire module -->
{#await handleIconChange(symbol) then { default: icon }}
    {@html icon}
{/await}