在对象中添加 svg（组件）作为属性

Question

我有这个。

let items = [
{ name: 'John', age: 27, icon: 'svg?' },
{ name: 'Peter', age: 54, icon: 'svg?' }
]

然后：

{#each items as item}
<div>{item.name}</div>
<div>{item.icon}</div>
{/each

我使用 Svelte 并导入我的 svg 图标

import Something from '../svg/something-icon.svg';

通常在我的 .svelte 中我会使用：

<Something />

这很好用。

但是，我怎么知道将我的 svg 作为属性添加到我的对象中，上面写着icon: 'svg?'

Answer 1

如果您在变量中有一个组件类，则可以使用以下内容进行渲染：

<svelte:component this={item.icon} />

Docs

（如果属性只包含 SVG 字符串，可以使用{@html item.icon}）