Why does Icon work and UIcon not.
I am new to the latest version of nuxt, and am now in the position of migrating a nuxt 3.6 site (Docus / Quasar) to nuxt 3.11. (NuxtUI)
So I'm taking a fresh approach with 3.11 and am trying NuxtUI-Pro and tailwind (both of which are new to me)
This brings me to my first question I couldn't resolve the why of...
Why does Icon render both of the icons but UIcon fail to render anything but the icons that I guess "came with the example code"?
Take a look at the screen shot it will show you what I mean.
I have not loaded any icon sets in my configs as per here, https://ui.nuxt.com/getting-started/installation#options but Icon is working anyway?
![No description](https://cdn.answeroverflow.com/1231221829129994282/2024-04-21_00-17.png)
3 Replies
The reason
Icon
is working for you and not UIcon
is that Icon
is the component provided by NuxtIcon
and as explained it fetches the icon from the internet that's why it's works. Your UIcon
isn't working as expected because you haven't installed the collections properly. Read the following for explanation
NuxtUI
uses two modules for icons.
- egoist/tailwindcss
: The default option which bundles the icons you use instead of requesting it from the network when the page loads but requires you to download the collections you want and enable them in the config (See docs for this https://ui.nuxt.com/getting-started/theming#collections). For example in your case, you need to install @iconify-json/{your_collection_name}
and add this in your nuxt config
- NuxtIcon
: This module prefetches the icons you type at runtime. This means you don't have to install or configure anything, but you'll request every icon when the page loads which is not as good as the above solution performance-wise.Ahh I see, thanks for the clear explanation on the icon handling. I'll install the icon collection.
So Failing forward here, I'll put a note here for others. After I had installed the both the game icons collection and the ALL collection, but was still unable to get UIcon to function as expected.
To make it work you have to use the right naming pattern. So
becomes
As noted at the very top of the page here. https://ui.nuxt.com/components/icon
That's right. You also can remove the individual collections packages as you already installed
iconify/json
which has all the collections (I guess you set icons
to all
in nuxt.config
)