从 Svelte 中的数组动态导入 Fontawesome 图标

问题描述

我正在使用 svelte-fa 导入图标。手动导入它们并在我的组件中渲染没有问题，如下所示：

<script>
import { faDog,faCat } from '@fortawesome/pro-duotone-svg-icons';
</script>

<Fa icon={faDog} />
<Fa icon={faCat} />

但是，我想导入 100 个图标。我有一个 JS 文件，其中包含一个包含图标名称的数组：

export default [
  { icon: 'faDog',label: 'Dogs',id: 1 },{ icon: 'faCat',label: 'Cats',id: 2 }
]

然后使用 #each 块渲染它们：

<script>
  import { faDog,faCat } from '@fortawesome/pro-duotone-svg-icons';
  import iconsData from '../icons.js';
</script>

{#each iconsData as icon }
  <Card label={icon.label} icon={icon.icon} />
{/each}

我可以看到所有图标的标签，但没有显示图标。有没有办法解决这个问题？

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

font-awesome-5 svelte