@antfu/nuxt-icon-poc

Poc for next Nuxt Icons

This POC is trying to improve the SSR compatibility of the Nuxt Icon module.

The approach:

• Create a /api/_nuxt_icon/ endpoint that will serve the icons from server-bundle, or fallback to Iconify API
• <Icon/> 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).

Todo:

• SSR and data fetching for <Icon/> component
• App config customization and schema
• Codegen for server-side icons bundle (to serve icons without the need for Iconify API)
• Rendering Vue component by name: https://github.com/nuxt-modules/icon/tree/main?tab=readme-ov-file#vue-component
• <IconCSS/> and the SSR support

Breaking changes:

• App config schema changes
  • iconifyApiOptions is removed
  • iconifyApiOptions.url -> iconifyApiEndpoint
  • iconifyApiOptions.publicApiFallback -> fallbackToApi (default: true)