feat!: new icon approach

[antfu]

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

• Support loading icons for local icons folder, close https://github.com/nuxt-modules/icon/issues/131

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

• [x] Update docs

[what-the-diff[bot]]

PR Summary

• Added a line to .npmrc for ignoring workspace root check This PR adds an instruction in the project's configuration file to ignore workspace root checks, contributing to smooth project management processes.

• Deleted .prettierrc and made necessary changes in package.json The code formatting configuration file has been removed and corresponding changes have been integrated into the project's main config file, package.json, where the package management has been assigned to pnpm version 9.0.5.

• Updated app.config.ts and app.vue files This update introduced some changes in the app.config.ts and app.vue files, such as the alias name change from nxt to NuxtLogo and the addition of TypeScript script setup block in app.vue.

• Introduced NuxtLogo.vue and deleted NuxtIcon.vue The NuxtLogo.vue was added and NuxtIcon.vue was removed.

• Modified nuxt.config.ts Significant changes include the removal of unevaluatedProperties and the addition of nuxtIcon options to the main config. Improvements were oriented towards project configuration settings.

• Setup changes in playground directory The changes have been made with an aim to provide an environment for developers to build, run, and generate scripts easily before pushing the changes into the main project source code.

• Added necessary configurations and schema in root directory and integrations directory This PR introduces server configurations, schemas, new plugin, and components to harmonize the operations and enhance the versatility of the tool.

• Introduced significant modifications in module.ts A range of new options, import statements, and codes have been added to the module configuration. This change provides more flexibility to manage the plugins, components, and server handler.

• Made changes in Icon.vue and IconCSS.vue files Old Icon.vue and IconCSS.vue have been removed and new ones have been introduced with optimized code.

• *Removed utils folder and added new `.tsfiles** Theutilsdirectory has been deleted and replaced with other necessary*.tsfiles likeindex.ts,schema-types.ts`, and others. This enhances maintainability while improving the code organization of the project.

• Added src/types.ts The new file contains type definitions that contribute to better code readability and understanding for developers. It provides improved structure and clarity for the main entities used throughout the project.

[benjamincanac]

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

[antfu]

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

[benjamincanac]

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]

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

[gitFoxCode]

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

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