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

    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.

Nuxt UI 3 Dynamic Icons

Similar Threads

Similar Threads

Similar Threads