feat(Icon)!: migrate from @egoist/tailwindcss-icons to new @nuxt/icon

[benjamincanac]

🔗 Linked issue

Resolves #1188
Resolves #1043
Resolves #1045
Resolves #1182
Resolves #1687
Resolves #1886
Resolves https://github.com/nuxt/ui-pro/issues/143

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR removes the @egoist/tailwindcss-icons dependency in favor of the next major version of nuxt-icon which is now officially @nuxt/icon.

Thanks to the incredible work of @antfu who did a complete rewrite of the module, it now works much better with SSR (no flicking on the client side) so we no longer need to rely on Tailwind CSS to bundle icons. You can check nuxt/icon#154 for the full list of changes.

This PR introduces some breaking changes, but is a big step towards v3:

1. the ui.icons module option (nuxt.config.ts) is removed

You no longer need to specify which Iconify collection you want to use as @nuxt/icon discovers them automatically. You can remove it safely if you used it with an array of collection or with all. Nuxt Icon will also automatically warn you if you didn't install a @iconify-json collection.

If you used it as an object to provide custom collections, you can now use the icon key in your nuxt.config.ts: https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections

2. the dynamic prop (UIcon.vue) and the ui.icons.dynamic option (app.config.ts) are removed

The dynamic prop was introduced in https://github.com/nuxt/ui/releases/tag/v2.11.0 to use nuxt-icon instead of the default behaviour with @egoist/tailwindcss-icons. It was useful when using dynamic class names or for icons coming from a database for example.

You no longer need this as @nuxt/icon will automatically fallback to Iconify API when the requested icon is not bundled.

3. nuxtIcon option has been renamed to icon (app.config.ts)

When using the dynamic mode (nuxt-icon), you might have used the nuxtIcon key in your app.config.ts. In Nuxt Icon v1, this has been renamed to icon: https://github.com/nuxt/icon?tab=readme-ov-file#configuration-%EF%B8%8F

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

@antfu Should I release @nuxt/ui with [email protected] or wait for the official release?

[benjamincanac]

@antfu Should I remove the use of @egoist/tailwindcss-icons entirely?

[antfu]

@benjamincanac Sorry I was at conferences yesterday. Is the current state of nuxt-icon covers well the use cases of @nuxt/ui? If so, I think I will go ahead and prepare the v1.0 release.

Do you have the use cases of @egoist/tailwindcss-icons without using the component? Like <div class="i-carbon-apps"/> instead of <Icon icon="i-carbon-apps">? If you always expect users to use the component I think yes you might disable @egoist/tailwindcss-icons - otherwise it might be safe to keep them both for sure

[benjamincanac]

I guess it does, I haven't encountered any issue. I guess I'll remove @egoist/tailwindcss-icons then, all components use the UIcon component underneath so it should be safe.

[PixelDust22]

I'm glad that we've finally made the switch. Will certainly make life easier.

[spencerjsmall]

Been playing around with this on edge and has been such a lifesaver... thank you for implementing! @benjamincanac do you plan on releasing this with v3 or with the next Nuxt UI release?

[benjamincanac]

@spencerjsmall I'll make a minor release tomorrow as 2.18.0 😊 It is already implemented in v3: https://github.com/benjamincanac/ui3/blob/dev/src/module.ts#L68

[zigomir]

One problem we're hitting with this migration is that Custom Local Collections can't be used with ssr: false for typical SPA production environment, because it assumes there's a running server serving these custom icons. Previously <=v2.17.x we could deploy all the static assets (.output/public/ dir) into an S3 bucket and call it a day.

What would be your suggested workaround / path forward for this (except staying on v2.17)?

[antfu]

@zigomir nuxt/icon#223 should improve it, I will release it soon later today

[zigomir]

@zigomir nuxt/icon#223 should improve it, I will release it soon later today

awesome, this works, thank you!

[luacooli]

Icons Not Rendering in Tool Panel After Update

After updating, the icons inside the tool panel of the AG Grid framework are no longer rendering as expected. Additionally, the following warning appears in the console:

: setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered.

[sandros94]

Icons Not Rendering in Tool Panel After Update

After updating, the icons inside the tool panel of the AG Grid framework are no longer rendering as expected. Additionally, the following warning appears in the console:

: setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered.

Hi @luacooli, could I ask you to open up a new issue for this?
https://github.com/nuxt/ui/issues/new?template=bug-report.yml