Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: new icon approach #154

Merged
merged 16 commits into from
May 2, 2024
Merged

feat!: new icon approach #154

merged 16 commits into from
May 2, 2024

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

This comment was marked as outdated.

package.json Outdated Show resolved Hide resolved
src/module.ts Outdated Show resolved Hide resolved
@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
1 check passed
@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
4 participants