I have this.

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

Then:

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

I use Svelte and I import my svg icons with

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

Normally in my .svelte I would use then:

<Something />

and this works well.

However, how do I know add my svg as a property in my object where it says icon: 'svg?'

CodePudding user response：

If you have a component class in a variable, you can render using something like:

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

Docs

(If the property only contains an SVG string, you can use {@html item.icon})