menu

Questions & Answers

How to use @heroicons/vue in Nuxt3?

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"

enter image description here

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?

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

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

Comments:
2023-01-24 23:20:10
perfect! this works for me.. in my case i cannot add "24" to the import package because is not supported in nuxt 3 but i can add the class to the component.. thank you a lot!