Question

我正在使用 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}

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

提前致谢

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

0 个答案: