[Opinion] nuxt-icon <Icon> VS nuxtlabs ui <UIcon> is confusing and adds fragmentation

[ddahan]

I love nuxtlabs UI, but the current state of icons in Nuxt is now confusing to me, and I'll try to explain why. Maybe I missed something and people will help me clarify.
 While one of the main advantage to use official stuff is conventions, there are now two official ways to use icons in a Nuxt project: nuxt-icons and nuxtlabs UI.

So first naïve question: which one should I use? I tried to list differences between both projects:

• nuxtlabs UIcon component has a single name prop while nuxt-icon Icon component has more properties (color, size). Why this difference?

• nuxtlabs icon name is i-collection-name while a nuxt-icon icon is collection:name. Why this difference? Using this amazing VS Code extension, it produces a different result:

• As explained in the documentation, the behaviour to load icons is very different too: with nuxtlabs UI, you need to download and declare the collections you use, while nuxt-icon download anything you need on-the-fly. I don't really know what's best for me, I just want someone to take that decision for me. If the difference is important to some people, maybe there should be a config option somewhere?

What would I expect instead?

I would expect a single official and clear way to add icons in my project:

• if I don't use nuxtlabs UI, I download nuxt-icon module by myself
• if I use nuxtlabs UI, in the same way that I don't need to install color-mode and tailwindcss anymore, I'd expect I don't need to install nuxt-icon module anymore because it's installed as a dependency. I'd expect there is a single component, and that nuxtlabs icon documentation page points to nuxt icon module.

As a whole, I think a great advantage of Nuxt is to have conventions and no brainer choices, and that fragmentation should be avoided to keep the great DX and Nuxt philosophy. Please feel free to disagree, I'm no expert and may have missed lots of things here.

[atinux]

We are aware about this. As the author of Nuxt-icon I agree that right now it is not the best solution to have two different way of using Icons.

Nuxt-icon works with any UI library but has the drawback of downloading the icon at runtime, I plan to rework it as soon as I get more time. The advantage is that you can update icons at runtime (ex from a CMS) and respect the Iconify convention.

NuxtLabs UI icons is aimed for best performance and based on the TailwindCSS icons plugin directly, embedding the base64 directly in the source code at build time and avoid any HTTP calls (even cached) to Iconify. We took this solution for now until Nuxt-icon can level up. It would be nice to see if we can find a way to respect the same convention as Iconify in this plugin though.

I agree in any case and thank you for the feedback. we decided to open source the UI library even if not ideal to offer to the community our work to help ship nice applications faster ❤️

[TechAkayy]

Unocss's preset-icon works similar to UIcon.

@Atinux, with unocss preset-icons, we can install the whole @iconify/json package (larger in size of course) instead of @iconify-json/{collection_name}, that way we can use any iconify icon without installing specific icon collections. Is this possible with UIcon? They key advantage here is we can avoid looking-up the collection-name and defining them in the ui>icons array.

Also, it would be a good idea to stick to the collection:name instead of the i-collection-name. Here are some usage stats from the wider community.

Iconify - Uses collection:name. No prefix supported when copying Icones - Uses collection:name. Supports both formats, supports prefix Nuxt-Icon - Uses collection:name. No prefix support Astro-Icon - Uses collection:name. No prefix support Unocss preset-icons - Supports both formats, supports prefix

Given the fact that collection:name is uses everywhere, it would be good to stick to this (or support both formats). Prefix config would be a bonus.

When we copy from iconify or icones, we don't have to replace the colon with a hyphen everytime. Thanks again!

[benjamincanac]

As we're using https://github.com/egoist/tailwindcss-icons underneath, you can also install the whole @iconify/json package. This plugin follows the same convention as UnoCSS icons preset and uses i-collection-name.

This plugin parses all of your code to search for icons like Tailwind JIT with classes and bundles them, it's quite convenient to have a prefix to achieve this otherwise the boot time would be way too long I guess.

[benjamincanac]

And also, when going to https://icones.js.org, you have a little arrow to select which format you want that will be saved in your local storage:

[TechAkayy]

Thanks bunch for the detailed explanations. So, if I want to use any icons by installing @iconify/json, how do I specify this in the ui/icons array in the config? Something like:

icons: ['*']?

[TechAkayy]

Just checked the underlying plugin https://github.com/egoist/tailwindcss-icons/blob/main/src/core.ts#L25 and looks like it accepts a string "all" instead of an array of collections.

I tried the below, and it worked, I didn't had to specify which iconsets I wanted to use. Though, it throws a type error because our package expects an array.

  ui: {
    icons: 'all',
  },

[benjamincanac]

@TechAkayy Will change the type to string | string[] then.

[atinux]

We may also document it too I think

[benjamincanac]

This has been done in https://github.com/nuxtlabs/ui/commit/85b10ba4ee00ae00dcf9ab93220ed0d03361765d and https://github.com/nuxtlabs/ui/commit/0b097352b429e3e11422ee3340a4c5d29786a4b8.

[ddahan]

I guess the work can be done from the other side too, that's why I suggested a small update of the extension: https://github.com/antfu/vscode-iconify/issues/51

[ddahan]

FYI, the Iconify VS Code extension has been updated by antfy to support the NuxtLabs UI syntax as well.