Skip to content

Conversation

@antfu
Copy link
Member

@antfu antfu commented Apr 23, 2024

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

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

@what-the-diff

This comment was marked as outdated.

@benjamincanac
Copy link
Member

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

@antfu
Copy link
Member Author

antfu commented Apr 29, 2024

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

@benjamincanac
Copy link
Member

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 😊

@antfu
Copy link
Member Author

antfu commented Apr 30, 2024

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

@antfu antfu merged commit b7ac02a into main May 2, 2024
@antfu antfu deleted the feat/new branch May 2, 2024 07:16
@gitFoxCode
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: SVG folder for offline mode and custom SVGs

5 participants