-
Notifications
You must be signed in to change notification settings - Fork 63
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
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
@antfu Would that be pertinent to add an option to append |
Maybe a |
I'm not sure it's a good idea for |
Alright, I think it should be good to go for a few beta releases. |
its |
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 usingcss
mode, (seticon.mode: 'svg'
to use the previous beahvor<IconCSS>
component is removednuxtIcon
toicon
iconifyApiOptions
has been removediconifyApiOptions.url
->iconifyApiEndpoint
iconifyApiOptions.publicApiFallback
->fallbackToApi
(default: true)New Features
Approaches
/api/_nuxt_icon/
endpoint that will serve the icons from server-bundle, or fallback to Iconify API (fallback to use public API whenssr:false
<Icon name="icon-name" mode="css" />
will render the icon as a CSS class, SSR is supported by injecting compiled CSS into HTML.<Icon name="icon-name" mode="svg" />
component will useuseAsyncState
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./api/_nuxt_icon/
will be made to fetch the icon data (cached event handler).TODOs