Nuxt•12h ago

Nuxt UI 3 Dynamic Icons

I am in the process of migrating my project to Nuxt 3 and an issue I am having is with a dynamic icon feature I had in a form. Previsouly I had it setup the following way:

    const displayIcon = computed(() => {
        if (!state.icon) return ''

        return `i-heroicons-${state.icon}`
    })

<UIcon
                            class="h-full"
                            :name="displayIcon"
                            dynamic />

    const displayIcon = computed(() => {
        if (!state.icon) return ''

        return `i-heroicons-${state.icon}`
    })

<UIcon
                            class="h-full"
                            :name="displayIcon"
                            dynamic />

What do I have to change to make it work now? Yes I have the HeroIcons collection installed and I can use icons just fine if I hard code them in the prop.

11 Replies

kapa.ai•12h ago

Hi @Rohjans. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use dynamic icon names with Nuxt UI 3, you should pass the computed string (e.g., i-heroicons-user) directly to the name prop of the <UIcon> component. There is no need for a dynamic prop—Nuxt UI 3's <UIcon> already supports dynamic values for the name prop. Your approach is correct as long as displayIcon returns a valid icon name string. For example:

<script setup lang="ts">
const displayIcon = computed(() => {
  if (!state.icon) return ''
  return `i-heroicons-${state.icon}`
})
</script>

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

<script setup lang="ts">
const displayIcon = computed(() => {
  if (!state.icon) return ''
  return `i-heroicons-${state.icon}`
})
</script>

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

If you are experiencing issues where the icon does not render when using a dynamic value, it may be related to how Tailwind CSS purges unused classes. Tailwind only includes classes that are statically present in your code. If your icon names are generated dynamically, Tailwind may not include the necessary CSS for those icons, resulting in missing icons at runtime. Solution:
To ensure Tailwind includes the icon classes, you should list all possible icon class names somewhere in your code as static strings. This is a known limitation when using icon libraries that rely on CSS classes with Tailwind's purge mechanism. For more details, see the explanation on Stack Overflow:

You need to hardcode them statically then get access to them using a literal object or an array.
Stack Overflow Post

Summary:
- You do not need a dynamic prop. - Make sure all possible icon class names are statically present in your codebase to avoid Tailwind purging them. - Passing a computed string to the name prop is the correct approach. If you follow these steps, your dynamic icons should work as expected in Nuxt UI 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12h ago

<@327507766216359936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RohjansOP•11h ago

@kapa.ai It shouldn't have anything to do with tailwind, I have added this to my nuxt.config

icon: {
        serverBundle: {
          collections: ['heroicons'],
        },
        provider: 'server'
    },

icon: {
        serverBundle: {
          collections: ['heroicons'],
        },
        provider: 'server'
    },

kapa.ai•11h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct that if you're using the Nuxt Icon module with the provider: 'server' and have the HeroIcons collection installed and bundled via the serverBundle option in your nuxt.config.ts, Tailwind's purging of CSS classes should not affect icon rendering. The Nuxt UI <UIcon> component uses the Iconify engine, which fetches and renders SVGs directly, not CSS classes, when configured this way. To use dynamic icon names, you should continue to pass the computed string to the name prop of <UIcon>. There is no need for a dynamic prop—just ensure your computed property returns the correct icon name string, such as i-heroicons-user. Example:

<script setup lang="ts">
const displayIcon = computed(() => {
  if (!state.icon) return ''
  return `i-heroicons-${state.icon}`
})
</script>

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

<script setup lang="ts">
const displayIcon = computed(() => {
  if (!state.icon) return ''
  return `i-heroicons-${state.icon}`
})
</script>

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

This is the recommended approach according to the Nuxt UI documentation. If hardcoded icon names work but dynamic ones do not, double-check that state.icon always contains a valid HeroIcons name and that your computed property is reactive and up-to-date. There is no mention in the knowledge sources of any additional steps required for dynamic icon names when using the server provider and bundled collections—this setup should work as expected for dynamic icons in Nuxt UI 3 Getting-started > Icons Components > Icon. If you are still experiencing issues, the knowledge sources do not provide further troubleshooting steps specific to this configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11h ago

<@327507766216359936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RohjansOP•11h ago

@kapa.ai Still doesn't work, any more suggestions?

kapa.ai•11h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry you're still experiencing issues. Based on the knowledge sources, if you have the HeroIcons collection installed and configured with the server provider, and hardcoded icon names work but dynamic ones do not, there is no explicit mention of additional steps required for dynamic icon names in Nuxt UI 3. The official documentation shows that passing a computed string to the name prop should work, as in:

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

<template>
  <UIcon :name="displayIcon" class="h-full" />
</template>

where displayIcon returns a string like i-heroicons-user Components > Icon. If this is not working, the knowledge sources do not provide further troubleshooting steps or known issues for this scenario. You may want to double-check that your computed property is reactive and that the value it returns matches a valid icon name. If the problem persists, it may be necessary to consult the Nuxt UI issue tracker or community for more specific debugging, as the documentation does not cover this edge case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11h ago

<@327507766216359936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RohjansOP•11h ago

@kapa.ai I get the feeling its because I am using HeroIcons instead of the new shiny lucide icons. What config must I have in my nuxt config?

kapa.ai•11h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, Nuxt UI 3 uses Lucide icons as the default icon set for its components. The configuration examples and default icon mappings in the documentation all reference Lucide icons (e.g., i-lucide-search, i-lucide-x, etc.) Getting-started > Icons. If you want to use HeroIcons instead of Lucide, you need to ensure that: 1. The HeroIcons collection is installed (which you have done). 2. You reference the correct icon names (e.g., i-heroicons-user). 3. You may need to override the default icon mappings in your app.config.ts to use HeroIcons instead of Lucide icons for UI components. Example: Override default icons in app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      search: 'i-heroicons-search',
      close: 'i-heroicons-x-mark',
      // ...add other overrides as needed
    }
  }
})

export default defineAppConfig({
  ui: {
    icons: {
      search: 'i-heroicons-search',
      close: 'i-heroicons-x-mark',
      // ...add other overrides as needed
    }
  }
})

This will tell Nuxt UI to use your specified HeroIcons instead of the default Lucide icons for those components Getting-started > Icons > Theme. Note:
The documentation does not mention any special configuration in nuxt.config.ts specifically for using HeroIcons with Nuxt UI 3, other than ensuring the icon collection is available and referenced correctly. If you want to use HeroIcons throughout your app, you must override the default icon mappings as shown above. If you continue to experience issues, the knowledge sources do not provide further troubleshooting steps for using HeroIcons instead of Lucide icons. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11h ago

<@327507766216359936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI 3 Dynamic Icons

Did you find this page helpful?