How to use @heroicons/vue in Nuxt3?

Question

i want to import @heroicons/vue in Nuxt 3 but my icon not appear in frontend.

my setup:

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

my 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>

the variable profile.Item.icon has a string value of "HomeIcon"

I have tried to pass the value directly to the child component "ProfileItem.vue" but i receive the same error message.

When i pass the value directly as string ("HomeIcon" instead of profile.Item.icon) than it works because it mentioned the attribute from import { HomeIcon, FilmIcon, PlusIcon } from "@heroicons/vue/solid

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

Did anyone know how to load the icons dynamically?

Answer 1

That one works well

<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>

as explained here, you need the 24 in your import (for the size).

---

Not sure but this may also help maybe, didn't have to use that myself: https://github.com/tailwindlabs/heroicons/issues/564

Or you can forget about worrying about various icons configuration and fallback to that one (configured once and for all): https://stackoverflow.com/a/72055404/8816585

Answer 2

You can also use it without <component/> and register the icon as a component. Should also work with the composition api.

<template>
   <CheckCircleIcon />
</template>

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

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