如何在 Nuxt3 中使用@heroicons/vue？

Question

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

我的设置：

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

Answer 2

您也可以在没有<component/>的情况下使用它，并将图标注册为组件。 还应该与组成 api 一起工作。

<template>
   <CheckCircleIcon />
</template>

<script>
import { CheckCircleIcon } from "@heroicons/vue/24/solid";

export default {
  components: {
    CheckCircleIcon,
  }
}
</script>