如何在Nuxt3中使用@海洛因/vue？

Question

我想导入@heroicons/vue在Nuxt 3，但我的图标没有出现在前面。

我的设置：

import { HomeIcon, FilmIcon, PlusIcon } from "@heroicons/vue/solid"

我的html：

<template v-for="(profileItem, i) in accountSetFields" :key="i">
  <ProfileItems :user="user" :item="profileItem" />
    <template v-slot:icon>
      <component :is="profileItem.icon"></component>
    </template>
  </ProfileItems>
</template>

变量profile.Item.icon的字符串值为"HomeIcon“。

​

​

我试图直接将该值传递给子组件"ProfileItem.vue“，但我收到了相同的错误消息。

当我以字符串("HomeIcon“而不是profile.Item.icon)的形式直接传递值时，它会起作用，因为它提到了来自import { HomeIcon, FilmIcon, PlusIcon } from "@heroicons/vue/solid的属性

<component :is="HomeIcon"></component>

有人知道如何动态加载图标吗？

Answer 1

那个很好用

<script setup>
import { HomeIcon, FilmIcon, PlusIcon } from "@heroicons/vue/24/solid"

const icons = reactive({
  home: HomeIcon,
  film: FilmIcon,
  plus: PlusIcon,
})
</script>

<template>
  <component :is="icons.home"></component>
</template>

作为在此解释，您需要导入的24 (大小)。

不确定，但这也许也有帮助，我不用自己用：https://github.com/tailwindlabs/heroicons/issues/564

或者，您可以忘记担心各种图标配置和回退到那个图标(一次性配置)：https://stackoverflow.com/a/72055404/8816585。