Skip to content

feat!: new icon approach#154

Merged
antfu merged 16 commits into
mainfrom
feat/new
May 2, 2024
Merged

feat!: new icon approach#154
antfu merged 16 commits into
mainfrom
feat/new

Conversation

@antfu

@antfu antfu commented Apr 23, 2024

Copy link
Copy Markdown
Member

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.

Comment thread package.json Outdated
Comment thread src/module.ts Outdated
@benjamincanac

Copy link
Copy Markdown
Member

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

@antfu

antfu commented Apr 29, 2024

Copy link
Copy Markdown
Member Author

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

@benjamincanac

Copy link
Copy Markdown
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

antfu commented Apr 30, 2024

Copy link
Copy Markdown
Member Author

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
Copy Markdown

(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