@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
• SVG Mode: <Icon name="icon-name" /> 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).
• 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/Tailwind icons-as-css solution)
• Default to the CSS mode

Todos

• 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)
• <Icon mode="css"/> and the SSR support
  • Custom CSS class prefix
  • Figure out how to filter out existing CSS selectors on server side
    • Now it works well with UnoCSS
    • Tailwind CSS (not sure if it's possible)
• Rendering Vue component by name: https://github.com/nuxt-modules/icon/tree/main?tab=readme-ov-file#vue-component
• PR for merge with nuxt/icon

Breaking changes

• App config schema changes
  • iconifyApiOptions has removed
  • iconifyApiOptions.url -> iconifyApiEndpoint
  • iconifyApiOptions.publicApiFallback -> fallbackToApi (default: true)
• <Icon> and <IconCSS> become <Icon mode="svg"> and <Icon mode="css">
• Default to the CSS mode