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>
      <ponent :is="profileItem.icon"></ponent>
    </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 ponent "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

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

Did anyone know how to load the icons dynamically?

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>
      <ponent :is="profileItem.icon"></ponent>
    </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 ponent "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

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

Did anyone know how to load the icons dynamically?

• javascript
• vue.js
• nuxt.js
• nuxt3.js
• heroicons

Share Improve this question Follow edited Nov 12, 2022 at 17:18 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Nov 12, 2022 at 15:42 user19540948user19540948

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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>
  <ponent :is="icons.home"></ponent>
</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./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./a/72055404/8816585

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

<template>
   <CheckCircleIcon />
</template>

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

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