This PR introduces a brand new icon approach that works much better with SSR (no flicking on the client side) and should help reduce the load of Iconify's public API by a lot.

Breaking Changes

• <Icon> and <IconCSS> is merged together, use <Icon mode="svg"> and <Icon mode="css">
• <Icon> now default using css mode, (set icon.mode: 'svg' to use the previous beahvor
• <IconCSS> component is removed
• Emoji-as-name is no longer supported
• Slot fallback is not supported yet
• App config key changed from nuxtIcon to icon
• App config schema changes
  • iconifyApiOptions has been removed
  • iconifyApiOptions.url -> iconifyApiEndpoint
  • iconifyApiOptions.publicApiFallback -> fallbackToApi (default: true)

New Features

• Support loading icons for local icons folder, close [Feature Request]: SVG folder for offline mode and custom SVGs #131

Approaches

• Create a /api/_nuxt_icon/ endpoint that will serve the icons from server-bundle, or fallback to Iconify API (fallback to use public API when ssr:false
• CSS Mode: <Icon name="icon-name" mode="css" /> will render the icon as a CSS class, SSR is supported by injecting compiled CSS into HTML.
  • On the client side, it will look up the registered CSS selectors. If the class is already presented, it will skip icon rendering (compatible with pre-compiled UnoCSS icons-as-css solution, TW support is still in research)
• SVG Mode: <Icon name="icon-name" mode="svg" /> component will use useAsyncState to fetch the icon data from the server (local fetch when SSR) and force Iconify to render the icon to SSR. Hydrate the data back on client side.
  • For dynamic icons that are presented on the server side, no client request will be made.
  • For dynamic icons that are presented only on the client side, a client request to /api/_nuxt_icon/ will be made to fetch the icon data (cached event handler).

TODOs

• Update docs

@antfu Would that be pertinent to add an option to append aria-hidden="true" on every icon?

Maybe a defaultAttrs option in the app config, what do you think?

I'm not sure it's a good idea for @nuxt/ui to configure this for all icons but this could be a nice addition anyway for nuxt-icon users 😊

Alright, I think it should be good to go for a few beta releases.

(set icon.defaultMode: 'svg' to use the previous beahvor)

its icon.defaultMode: 'svg' or icon.mode: 'svg' 😅