Svelte中如何将SVG组件作为对象属性添加？

1. 导入所需SVG组件
   先把需要用到的SVG图标组件导入到你的.svelte文件中：

import JohnIcon from '../svg/john-icon.svg';
import PeterIcon from '../svg/peter-icon.svg';

2. 将组件直接赋值给对象的icon属性
   不需要用字符串占位，直接把导入的组件作为icon属性的值：

let items = [
  { name: 'John', age: 27, icon: JohnIcon },
  { name: 'Peter', age: 54, icon: PeterIcon }
];

3. 使用<svelte:component>渲染动态组件
   在遍历渲染时，用Svelte内置的<svelte:component>来动态渲染item.icon对应的组件：

{#each items as item}
  <div>{item.name}</div>
  <div>
    <svelte:component this={item.icon} />
  </div>
{/each}

原理：Svelte中组件是一等对象，可以直接作为值存储，<svelte:component>的this属性用于指定要渲染的组件引用，刚好适配这种动态组件的场景。

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