Nuxt•5mo ago

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?

Nuxt UI

Installation - Nuxt UI

Learn how to install and configure Nuxt UI in your application.

3 Replies

Muhammad Mahmoud•5mo ago

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

defineNuxtConfig({
  ui: {
    icons: ['your_collection_name'], // Add 'your_collection_name' only
    icons: 'all' // Or use this to allow all icons
  }
})

defineNuxtConfig({
  ui: {
    icons: ['your_collection_name'], // Add 'your_collection_name' only
    icons: 'all' // Or use this to allow all icons
  }
})

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

Nuxt UI

Theming - Nuxt UI

Learn how to customize the look and feel of the components.

DMLiquidity•5mo ago

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.

  "dependencies": {
    "@iconify-json/game-icons": "^1.1.9",
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/simple-icons": "^1.1.97",
    "@iconify/json": "^2.2.202",

  "dependencies": {
    "@iconify-json/game-icons": "^1.1.9",
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/simple-icons": "^1.1.97",
    "@iconify/json": "^2.2.202",

To make it work you have to use the right naming pattern. So

game-icons:evil-book

game-icons:evil-book

becomes

i-game-icons-evil-book

i-game-icons-evil-book

As noted at the very top of the page here. https://ui.nuxt.com/components/icon

Muhammad Mahmoud•5mo ago

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)

Gaming

Programming

Why does Icon work and UIcon not.