如何在Svelte项目中按名称引入svelte-icons图标？

svelte-icons里的每个图标都是独立的Svelte组件，按名称添加有两种常用方式：

方式一：单独导入指定图标 #

直接按需导入对应名称的图标组件，然后直接使用：

<script>
  // 按图标名称导入，路径格式为`svelte-icons/[图标库前缀]/[图标名称].svelte`
  import GiAirplane from 'svelte-icons/gi/GiAirplane.svelte';
  // 可同时导入多个
  import GiFilter from 'svelte-icons/gi/GiFilter.svelte';
</script>

<!-- 直接渲染导入的图标组件 -->
<GiAirplane />
<GiFilter />

方式二：批量导入后动态调用 #

如果需要根据变量动态切换图标，先批量导入整个图标库，再用svelte:component按名称渲染：

<script>
  import * as gIcons from 'svelte-icons/gi';
  // 假设filter.icon存储的是图标名称字符串（如"GiAirplane"）
  let filter = { icon: "GiAirplane" };
</script>

<!-- 通过变量名称匹配批量导入的组件，动态渲染 -->
<svelte:component this={gIcons[filter.icon]} />

注意：确保变量中的图标名称和组件的实际名称完全一致（比如gi库的图标都是Gi开头的驼峰命名）。

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