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

【问题标题】：How to use @heroicons/vue in Nuxt3?如何在 Nuxt3 中使用@heroicons/vue？
【发布时间】：2023-01-24 19:02:48
【问题描述】：

我想在 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>

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

【问题讨论】：

标签： javascript vue.js nuxt.js nuxtjs3 heroicons

【解决方案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>

作为explained here，您需要在导入中使用24（用于大小）。

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

或者你可以忘记担心各种图标配置和回退到那个（一劳永逸地配置）：https://stackoverflow.com/a/72055404/8816585

【讨论】：

完美的！这对我有用..在我的情况下，我无法将“24”添加到导入包中，因为在 nuxt 3 中不受支持，但我可以将类添加到组件中..非常感谢！

【解决方案2】：

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

<template>
   <CheckCircleIcon />
</template>

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

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

【讨论】：