admin管理员组文章数量:1323225
- I am using svelte 5 / sveltekit 2
- I have a simple example where I get data from an API that looks like this
const itemsFromAPI = [
{ id: 1, symbols: ['btc', 'eth'] },
{ id: 2, symbols: ['xrp', 'xmr'] }
];
- I want to render SVG icons corresponding to each symbol using this library
- Bear in mind, I am well aware they have a svelte version but it hasn't been updated in 5 years
- I wrote a simple +page.svelte file but it doesnt render
<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}
- Here is the link to the CODESANDBOX where you can see the problem first hand
- Any ideas how to make dynamically imported SVG icons work in sveltekit?
- I am using svelte 5 / sveltekit 2
- I have a simple example where I get data from an API that looks like this
const itemsFromAPI = [
{ id: 1, symbols: ['btc', 'eth'] },
{ id: 2, symbols: ['xrp', 'xmr'] }
];
- I want to render SVG icons corresponding to each symbol using this library
- Bear in mind, I am well aware they have a svelte version but it hasn't been updated in 5 years
- I wrote a simple +page.svelte file but it doesnt render
<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}
- Here is the link to the CODESANDBOX where you can see the problem first hand
- Any ideas how to make dynamically imported SVG icons work in sveltekit?
1 Answer
Reset to default 1The function returns a promise, to use that in the template you have to use an #await
block, also the query requires the raw
specifier, otherwise you get a URL when importing images (not sure if inline
does anything on dynamic imports, since it then would have to inline all possible files).
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}
本文标签: svelteDynamically imported SVG icons not workingStack Overflow
版权声明:本文标题:svelte - Dynamically imported SVG icons not working - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742079391a2419606.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论