Icons not rendered with icons: all

[MuhammadM1998]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@9.4.2
• Builder: -
• User Config: devtools, modules, ui
• Runtime Modules: @nuxt/ui@2.12.0
• Build Modules: -

Version

v2.12.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-aet6xx?file=nuxt.config.ts

Description

EDIT: After searching for a solution on Discord, it appears the error occurs after Nuxt 3.9

Enabling all icons doesn't work. I have to specify icon collection.

• In the reproduction, you'll find I'm using 3 Icons from 'heroicons', 'material-symbols', and 'carbon'
• I'm enabling all icons in nuxt.config with ui.icons: 'all'
• Run the dev server and the icons are not rendered
• Specify the icon collection in nuxt.config like the following and it does work

defineNuxtConfig({
  ui: { icons: ['carbon'] } // Enable 'carbon' collection, works
  //  ui: { icons: ['material-symbols'] } // Enable 'material-symbols' collection, works
  //  ui: { icons: ['carbon', 'material-symbols'] } // Enable both collections, works
  //  ui: { icons: 'all' } // Enable all collections, Doesn't work
  //  ui: { icons: {} } // Doesn't work too
})

Additional context

I've also tried with 2.11.1, 2.11.0, 2.10.0, and 2.9.0. Same problem

Logs

No response

[rlightner]

Seeing this same issue.

[MHillier98]

Having the same issue, trying to use <UIcon name="i-heroicons-arrow-top-right-on-square" />

[naruko-hstk]

Same issue, nuxt version:3.9.1 and ui version:2.12.0

[benjamincanac]

This might have something to do with https://github.com/egoist/tailwindcss-icons/releases/tag/v1.7.0 and specifically egoist/tailwindcss-icons@b53dde9.

I did the migration when it was released but I might have missed something. Will look into it!

[MuhammadM1998]

I checked the code and yeah this might be the issue. Also it says this in the README usage code snippet

// You can also ignore this option to automatically discover all icon collections you have installed
collections: getIconCollections(["mdi", "lucide"])

So I thought If I removed the icons object altogether it would detect automatically, but the module uses heroicons by default so collections would always be an array with at least one item I think.

Thanks for looking into it 🙏

[benjamincanac]

Still not sure how to solve this, but I've opened an issue: egoist/tailwindcss-icons#38.

[MuhammadM1998]

I've tried to fix it the other day and IIRC I knew where the problem was (I didn't push a fix as you said you'll look into it, not sure If I should've done that 😅). I'll try to look at it again

[MuhammadM1998]

This is what I've found, the egoist plugin works like this

1. Use the passed collections or fallback to searching for indvidual collections installed in node_modules
2. Check if the full @iconify/json is installed
   • If Yes, it adds all icons in collections without indvidual checks
   • If Not, it first checks Indvidualy that each collection is installed then add it or throw an error if not.

Our problem happens when enabling all collections with icons: all. This is what happens

• nuxt/ui passes an empty object to egoist collections (https://github.com/nuxt/ui/blob/dev/src/module.ts#L153)
• egoist plugin fallbacks to searching for indvidual collections and it finds the default one which is heroicons
• now the collections array is ['heroicons']
• egoist plugin finds that the full @iconify/json is installed, so it injects the collections values, which is only heroicons

Previously it injected all the collections if 'all' is passed here as you stated. At that time, collections value was also ['heroicons'] but it just didn't check for it anyways. Now after that check is removed the issue appeared.

Possible solution is pass the available collections if 'all' is passed. We can import those from iconify/json much like what egoist plugin does https://github.com/egoist/tailwindcss-icons/blob/main/src/index.ts#L4

[benjamincanac]

Not sure to understand why the plugin fallbacks to ['heroicons'] when passing an empty array.

The issue is availableCollectionNames is not exported 🤔

[MuhammadM1998]

We're passing an empty options object, which means we pass collections as undefined not an empty array. So it tries to search for installed package in node_modules and it founds heroicons which is always installed by default by nuxt/ui.

But even if we pass an empty array, it'll compare that against availableCollectionNames and won't add any collection as it won't find any matches.

First one is keeping an internal copy of the availableCollectionNames and keeping it in sync with upstream. It requires manual work but complete collections aren't added that frequently anyways.

The other is searching for iconify/json when using icons: all and reading @iconify/json/collections.json https://github.com/egoist/tailwindcss-[Like here](icons/blob/main/gen-types.mjs#L6). This would automatically be up to date but a user can set icons: all and add individual packages and not the full package

[hyoban]

Sorry for my mistake in egoist/tailwindcss-icons, should be OK after v1.7.3. And i export collectionNames in v1.7.4

[MuhammadM1998]

@hyoban Thanks!

[benjamincanac]

@MuhammadM1998 I guess we should revert this then 4dee128#diff-030fc083b2cbf5cf008cfc0c49bb4f1b8d97ac07f93a291d068d81b4d1416f70L146, what do you think?