From a0c3d0c32ae7c595205b6a36a6d59368d383192e Mon Sep 17 00:00:00 2001 From: Amp Date: Sun, 25 Oct 2026 09:43:57 +0000 Subject: [PATCH 1/6] docs: add docs directory for nuxt.com/modules/icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Splits the README into pages that nuxt.com can host under /modules/icon (getting started, guide, configuration). Resolves #466 Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 Co-authored-by: Sébastien Chopin --- docs/.navigation.yml | 1 + docs/1.getting-started/.navigation.yml | 2 + docs/1.getting-started/1.installation.md | 38 +++++++ docs/1.getting-started/2.usage.md | 84 +++++++++++++++ docs/2.guide/.navigation.yml | 2 + docs/2.guide/1.custom-collections.md | 132 +++++++++++++++++++++++ docs/2.guide/2.customization.md | 88 +++++++++++++++ docs/2.guide/3.server-bundle.md | 116 ++++++++++++++++++++ docs/2.guide/4.client-bundle.md | 115 ++++++++++++++++++++ docs/2.guide/5.vite-plugin.md | 46 ++++++++ docs/2.guide/6.render-function.md | 24 +++++ docs/2.guide/7.testing.md | 56 ++++++++++ docs/3.configuration.md | 36 +++++++ docs/index.md | 21 ++++ 14 files changed, 761 insertions(+) create mode 100644 docs/.navigation.yml create mode 100644 docs/1.getting-started/.navigation.yml create mode 100644 docs/1.getting-started/1.installation.md create mode 100644 docs/1.getting-started/2.usage.md create mode 100644 docs/2.guide/.navigation.yml create mode 100644 docs/2.guide/1.custom-collections.md create mode 100644 docs/2.guide/2.customization.md create mode 100644 docs/2.guide/3.server-bundle.md create mode 100644 docs/2.guide/4.client-bundle.md create mode 100644 docs/2.guide/5.vite-plugin.md create mode 100644 docs/2.guide/6.render-function.md create mode 100644 docs/2.guide/7.testing.md create mode 100644 docs/3.configuration.md create mode 100644 docs/index.md diff --git a/docs/.navigation.yml b/docs/.navigation.yml new file mode 100644 index 00000000..c8d0d599 --- /dev/null +++ b/docs/.navigation.yml @@ -0,0 +1 @@ +title: Nuxt Icon diff --git a/docs/1.getting-started/.navigation.yml b/docs/1.getting-started/.navigation.yml new file mode 100644 index 00000000..dacc69b9 --- /dev/null +++ b/docs/1.getting-started/.navigation.yml @@ -0,0 +1,2 @@ +title: Getting Started +icon: i-lucide-rocket diff --git a/docs/1.getting-started/1.installation.md b/docs/1.getting-started/1.installation.md new file mode 100644 index 00000000..67282d28 --- /dev/null +++ b/docs/1.getting-started/1.installation.md @@ -0,0 +1,38 @@ +--- +title: Installation +description: 'Add Nuxt Icon to your Nuxt application.' +--- + +Run the following command to add the module to your project: + +```bash +npx nuxi module add icon +``` + +That's it, you can now use the `` in your components! + +✨ If you are using VS Code, you can use the [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) extension by [@antfu](https://github.com/antfu) + + +
+Manual Setup + +You can install the module manually with: + +```bash +npm i @nuxt/icon +``` + +Update your `nuxt.config.ts` + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ] +}) +``` + +If you have the legacy module `nuxt-icon` installed, you might want to remove it from the `modules` list. + +
diff --git a/docs/1.getting-started/2.usage.md b/docs/1.getting-started/2.usage.md new file mode 100644 index 00000000..ad214a53 --- /dev/null +++ b/docs/1.getting-started/2.usage.md @@ -0,0 +1,84 @@ +--- +title: Usage +description: 'Render any of the 200,000+ Iconify icons, or your own Vue components.' +--- + +**Props:** +- `name` (required): icon name or global component name +- `size`: icon size (default: `1em`) +- `mode`: icon rendering mode (`svg` or `css`, default: `css`) + +**Attributes**: + +When using an icon from Iconify, a `` or `` will be created based on the rendering mode, you can give [all the attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) of the native element. + +```html + +``` + +**TailwindCSS v4**: + +When using TailwindCSS v4 with the `css` mode, you should configure the `cssLayer` in Nuxt's app config: + +```ts +// ~/app.config.ts +export default defineAppConfig({ + icon: { + mode: 'css', + cssLayer: 'base' + } +}) +``` + +## Iconify Dataset + +You can use any name from the https://icones.js.org collection: + +```html + +``` + +It supports the `i-` prefix (for example, `i-uil-github`). + +It's highly recommended to install the icon data locally with + +```bash +npm i -D @iconify-json/collection-name +``` + +For example, to use the `uil:github` icon, install its collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side. + +> [!NOTE] +> You may also know you can install `@iconify/json` package to include all iconify icons. This is not recommended because it will increase your server bundle size and building performance. If you choose to do so, we'd recommend to explicitly specify the collection names you need: +> +> ```ts +> export default defineNuxtConfig({ +> modules: ['@nuxt/icon'], +> icon: { +> serverBundle: { +> collections: ['uil', 'mdi'] // +``` + +In the App Configuration File: + +Alternatively, you can apply these customizations globally in the `app.config.ts` file. +```ts +// app.config.ts +export default defineAppConfig({ + icon: { + customize: (content: string, name: string, prefix: string, provider: string) => { + // ... + }, + } +}) +``` +With this configuration, all icons throughout your application will have these customizations applied consistently. diff --git a/docs/2.guide/3.server-bundle.md b/docs/2.guide/3.server-bundle.md new file mode 100644 index 00000000..5bd6b53c --- /dev/null +++ b/docs/2.guide/3.server-bundle.md @@ -0,0 +1,116 @@ +--- +title: Server Bundle +description: 'Choose how icons are bundled and served by your Nuxt server.' +--- + +Since `@nuxt/icon` v1.0, we have introduced the server bundle concept to serve the icons from Nuxt server endpoints. This keeps the client bundle lean and able to load icons on-demand, while having all the dynamic features to use icons that might not be known at build time. + +## Server Bundle Mode: `local` + +This mode will bundle the icon collections you have installed locally (like `@iconify-json/*`), into your server bundle as dynamic chunks. The collection data will be loaded on-demand, only when your client request icons from that collection. + +## Server Bundle Mode: `remote` + +Introduced in `@nuxt/icon` v1.2, you can now use the `remote` server bundle to serve the icons from a remote CDN. + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + serverBundle: 'remote', + }, +}) +``` + +Or you can specify the remote provider: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + serverBundle: { + remote: 'jsdelivr', // 'unpkg' or 'github-raw', or a custom function + } + }, +}) +``` + +Which will make server requests to `https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json` to fetch the icons at runtime, instead of bundling them with your server. + +Under the hood, instead of bundling `() => import('@iconify-json/ph/icons.json')` to your server bundle, it will now use something like `() => fetch('https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json').then(res => res.json())`, where the collections are not inlined. + +This would be useful when server bundle size is a concern, like in serverless or worker environments. + +## Server Bundle Mode: `auto` + +This is the default option, where the module will pick between `local` and `remote` based your deployment environment. `local` will be preffered unless you are deploying to a serverless or worker environment, like Vercel Edge or Cloudflare Workers. + +## Externalize Icons JSON + +By default, Nitro will bundle the icon collections you have installed locally (like `@iconify-json/*`), into your server bundle as dynamic chunks. When you have a large number of icons, this might make your bundling process slow and memory-intensive. You can change to externalize the icons JSON files by setting `icon.serverBundle.externalizeIconsJson` to `true`. + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + serverBundle: { + externalizeIconsJson: true, + } + }, +}) +``` + +Note that this will require your production Node.js server to be able to import JSON files (Note that as in Node.js v22, [JSON modules are still an experimental feature](https://nodejs.org/api/esm.html#json-modules)). In the final build, it will contain statements like `() => import('@iconify-json/ph/icons.json', { with: { type: 'json' } })`. + +Also note that in some serverless environments, like Cloudflare Workers, where they don't have dynamic imports, they will always be inlined regardless of this option. + +This option will be ignored when `icon.serverBundle.remote` is enabled. + +## Completely Disable Server Bundle + +If you want to disable the server bundle completely, you can set `icon.serverBundle` to `false` and `provider` to `iconify` + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + provider: 'iconify', + serverBundle: false, + }, +}) +``` + +This will make requests to Iconify API every time the client requests an icon. We do not recommend doing so unless the other options are not feasible. + +## Separate Server and Client Providers + +`provider` can also be set separately for SSR and for the browser. + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + // SSR uses the server bundle through the local endpoint, the browser fetches from the Iconify API directly + provider: { server: 'server', client: 'iconify' }, + iconifyApiEndpoint: 'https://icons.example.com', + serverBundle: { + collections: ['ph', 'lucide'], + }, + }, +}) +``` + +- A string `provider: X` is the same as `{ server: X, client: X }`. +- The local endpoint is enabled when at least one side uses `server`, and so is the server bundle unless `serverBundle` is `false`. This is decided at build time, so overriding `provider` in `app.config.ts` does not enable or disable them. +- `provider` in `app.config.ts` is not validated: set both `server` and `client` there too. A side left out is taken from the module options when they also use the object form; otherwise it is treated as unset and falls back to the `iconify` provider. +- Unless both sides use `server`, `clientBundle.includeCustomCollections` defaults to `true`, since the client bundle is also used during SSR. diff --git a/docs/2.guide/4.client-bundle.md b/docs/2.guide/4.client-bundle.md new file mode 100644 index 00000000..a655d68d --- /dev/null +++ b/docs/2.guide/4.client-bundle.md @@ -0,0 +1,115 @@ +--- +title: Client Bundle +description: 'Ship the icons you use with the client to avoid network requests.' +--- + +For icons that you know you are going to use frequently, you can bundle them with your client bundle to avoid network requests. + +## Prefetch (Preload) Icons + +If you want icons to be available on first render, use the client bundle as the prefetch mechanism: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon', + ], + icon: { + clientBundle: { + // Explicitly pre-bundle known icons + icons: ['uil:github', 'heroicons:home'], + // Keep disabled if you only want explicit entries + scan: false, + }, + }, +}) +``` + +You can also enable static scanning to pre-bundle icons referenced literally in your source files: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon', + ], + icon: { + clientBundle: { + // Automatically includes statically-detected icon usages + scan: true, + // Keep explicit entries for dynamic icon names + icons: ['uil:github'], + }, + }, +}) +``` + +If you want to disable runtime icon fetching entirely, see [Disabling Runtime Fetching](#disabling-runtime-fetching) for the `provider: 'none'` + client bundle pattern. + +> [!TIP] +> Static scanning only detects literal icon names. See [Scan Components](#scan-components) for details and examples, and [Rendering Icons in Component Tests](#rendering-icons-in-component-tests) for test-environment setup. + +## Available Options + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + clientBundle: { + // list of icons to include in the client bundle + icons: [ + 'uil:github', + 'logos:vitejs' + ], + + // scan all components in the project and include icons + scan: true, + + // include all custom collections in the client bundle + includeCustomCollections: true, + + // guard for uncompressed bundle size, will fail the build if exceeds + sizeLimitKb: 256, + }, + }, +}) +``` + +`includeCustomCollections` will include all the custom collections you have defined in `icon.customCollections` in the client bundle. It's disabled by default when both sides of `provider` use `server`, and enabled otherwise (e.g. when `ssr: false` is set). + +## Scan Components + +When `scan` is enabled, the module will scan all the components in your project and include the icons used in the client bundle. This would significantly reduce the number of network requests needed for statically known icons, but might also increase the client bundle size depending on the number of icons used in your project. + +You can also fine-tune tine scanning targets like: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + clientBundle: { + scan: { + // note that when you specify those values, the default behavior will be overridden + globInclude: ['components/**/*.vue', /* ... */], + globExclude: ['node_modules', 'dist', /* ... */], + }, + }, + }, +}) +``` + +> [!TIP] +> Scanning is relying on static analysis, which means only literal usages will be detected. Avoid constructing the icon name dynamically whenever possible. +> +> ```vue +> +> ``` diff --git a/docs/2.guide/5.vite-plugin.md b/docs/2.guide/5.vite-plugin.md new file mode 100644 index 00000000..83cc9f14 --- /dev/null +++ b/docs/2.guide/5.vite-plugin.md @@ -0,0 +1,46 @@ +--- +title: Vite Plugin +description: 'Use Nuxt Icon without Nuxt.' +--- + +If you are building a plain Vue app with Vite (for example when using [Nuxt UI's Vue integration](https://ui.nuxt.com/docs/getting-started/integrations/vue)), there is no Nuxt server to serve icons from, and `@iconify/vue` would fetch icons from the Iconify API at runtime. To render icons offline (and during SSR) without network requests, `@nuxt/icon` ships a standalone Vite plugin that pre-bundles the icons you use into the client build: + +```ts +// vite.config.ts +import { defineConfig } from 'vite' +import { NuxtIconBundle } from '@nuxt/icon/vite' + +export default defineConfig({ + plugins: [ + NuxtIconBundle({ + // Explicitly pre-bundle known icons (hard-fails the build when missing locally) + icons: ['uil:github', 'heroicons:home'], + // Scanning your source files for icon usages is enabled by default + scan: true, + }), + ], +}) +``` + +Then register the bundled icons once in your entry file: + +```ts +// main.ts +import 'virtual:nuxt-icon-bundle/register' +``` + +Make sure the icon collections you use are installed locally (e.g. `npm i -D @iconify-json/uil`), and add the type shims for the virtual modules to your `tsconfig.json`: + +```json +{ + "compilerOptions": { + "types": ["@nuxt/icon/client"] + } +} +``` + +The plugin accepts the same options as `icon.clientBundle` (`icons`, `scan`, `sizeLimitKb`), plus `customCollections` — with two differences in defaults: `scan` is enabled by default (bundling is the whole point of the plugin), and `includeCustomCollections` is always enabled by default (there is no server provider to fall back to). + +For library and framework authors integrating icons themselves: `virtual:nuxt-icon-bundle` exports `init(addIcon)` so you can register the bundled data on your own copy of `@iconify/vue` (or any compatible store), and the underlying primitives (`IconUsageScanner`, `resolveBundleIcons`, `generateClientBundleCode`, ...) are exported from `@nuxt/icon/utils`. + +See [`playgrounds/vite/`](https://github.com/nuxt/icon/tree/main/playgrounds/vite) for a working example (`pnpm play:vite` to run it locally). diff --git a/docs/2.guide/6.render-function.md b/docs/2.guide/6.render-function.md new file mode 100644 index 00000000..8a10d74b --- /dev/null +++ b/docs/2.guide/6.render-function.md @@ -0,0 +1,24 @@ +--- +title: Render Function +description: 'Render icons from a render function.' +--- + +You can use the `Icon` component in a render function (useful if you create a functional component), for this you can import it from `#components`: + +```ts +import { Icon } from '#components' +``` + +See an example of a `` component: + +```vue + + +

+ +``` diff --git a/docs/2.guide/7.testing.md b/docs/2.guide/7.testing.md new file mode 100644 index 00000000..b60a0bfc --- /dev/null +++ b/docs/2.guide/7.testing.md @@ -0,0 +1,56 @@ +--- +title: Testing +description: 'Render icons in component tests.' +--- + +In in-browser component testing environments (such as [**Vitest Browser Mode**](https://vitest.dev/guide/browser/) or [**Cypress Component Testing**](https://on.cypress.io/component-testing)), the internal Nuxt server routes used to fetch icons on demand are **not available**. As a result, icons may fail to render during tests. + +To ensure icons render correctly in component tests, configure **@nuxt/icon** to use the **client bundle** when running in test mode. + +> **Note** +> Projects using [**@nuxt/ui**](https://ui.nuxt.com/) must do this to see any UI icons during component testing. + +## Requirements + +* Install the icon collections you use locally (for example, `@iconify-json/lucide`). +* Icons will **not** be fetched remotely when using the client bundle. + +## Test-only Configuration + +Conditionally switch to the client bundle in your Nuxt config when `NODE_ENV === 'test'`: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon', + ], + + icon: process.env.NODE_ENV !== 'test' + ? { + // Production or development icon configuration + } + : { + // Disable all network icon fetching in component tests + provider: 'none', + + clientBundle: { + // Explicitly include dynamically constructed icons + icons: ['lucide:check'], + + // Scan your app and Nuxt UI runtime for static icon usage + scan: { + globInclude: [ + '{app,shared}/**', + 'node_modules/@nuxt/ui/dist/**', + ], + globExclude: ['node_modules'], + }, + }, + }, +}) +``` + +> **Tips** +> +> * Dynamically generated icon names may not be detected by static scanning—add them explicitly to `icons`. +> * For large apps, consider moving test-only configuration into `vitest.config.ts` or `cypress.config.ts` for clarity. diff --git a/docs/3.configuration.md b/docs/3.configuration.md new file mode 100644 index 00000000..bbb72dec --- /dev/null +++ b/docs/3.configuration.md @@ -0,0 +1,36 @@ +--- +title: Configuration +description: 'Every option of the icon key in your Nuxt config.' +--- + +Configure Nuxt Icon with the `icon` key in your `nuxt.config.ts`: + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/icon'], + icon: { + mode: 'css', + cssLayer: 'base' + } +}) +``` + +## Options + +| Option | Default | Description | +| --- | --- | --- | +| `size` | `undefined` | **Icon Size** — Set the default icon size. | +| `class` | `''` | **CSS Class** — Set the default CSS class. | +| `mode` | `'css'` | **Default Rendering Mode** — Set the default rendering mode for the icon component | +| `aliases` | `{}` | **Icon aliases** — Define Icon aliases to update them easily without code changes. | +| `cssSelectorPrefix` | `'i-'` | **CSS Selector Prefix** — Set the default CSS selector prefix. | +| `cssLayer` | `undefined` | **CSS Layer Name** — Set the default CSS `@layer` name. | +| `cssWherePseudo` | `true` | **Use CSS `:where()` Pseudo Selector** — Use CSS `:where()` pseudo selector to reduce specificity. | +| `collections` | `null` | **Icon Collections** — List of known icon collections name. Used to resolve collection name ambiguity. e.g. `simple-icons-github` -> `simple-icons:github` instead of `simple:icons-github` When not provided, will use the full Iconify collection list. | +| `customCollections` | `null` | **Custom Icon Collections** | +| `provider` | `undefined` | **Icon Provider** — Provider to use for fetching icons - `server` - Fetch icons with a server handler - `iconify` - Fetch icons with Iconify API, purely client-side - `none` - Do not fetch icons (use client bundle only) `server` by default; `iconify` when `ssr: false` Use `{ server, client }` to set a different provider for SSR and for the browser, e.g. `{ server: \'server\', client: \'iconify\' }`. A string is the same as setting both sides. Both `server` and `client` are required in the object form. | +| `iconifyApiEndpoint` | `'https://api.iconify.design'` | **Iconify API Endpoint URL** — Define a custom Iconify API endpoint URL. Useful if you want to use a self-hosted Iconify API. Learn more: https://iconify.design/docs/api. | +| `fallbackToApi` | `true` | **Fallback to Iconify API** — Fallback to Iconify API if server provider fails to found the collection. | +| `localApiEndpoint` | `'/api/_nuxt_icon'` | **Local API Endpoint Path** — Define a custom path for the local API endpoint. | +| `fetchTimeout` | `1500` | **Fetch Timeout** — Set the timeout for fetching icons. | +| `customize` | `undefined` | **Customize callback** — Customize icon content (replace stroke-width, colors, etc...). | diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..471254fd --- /dev/null +++ b/docs/index.md @@ -0,0 +1,21 @@ +--- +title: Overview +description: 'Add 200,000+ ready to use icons to your Nuxt application.' +--- + +![Nuxt Icon](https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce) + +Add [200,000+ ready to use icons](https://icones.js.org) to your [Nuxt](https://nuxt.com) application, based on [Iconify](https://iconify.design). + +- [✨  Release Notes](https://github.com/nuxt-modules/icon/releases) +- [🏀  Online playground](https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue) + +## Features ✨ + +- Nuxt 3 ready +- SSR friendly +- Support 200,000 open-source vector icons via [Iconify](https://iconify.design) +- Support both CSS mode / SVG mode +- Custom SVG support (via Vue component, or via local SVG files) + +Head over to [Installation](/modules/icon/getting-started/installation) to get started. From c2640ef2171e7ef2720913659bfe6bc5c935cbb9 Mon Sep 17 00:00:00 2001 From: Amp Date: Sun, 25 Oct 2026 11:43:46 +0000 Subject: [PATCH 2/6] docs: title the docs index after the module MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Agents and search read the page title; the sidebar keeps `Overview` through `navigation.title`. Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 Co-authored-by: Sébastien Chopin --- docs/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 471254fd..dd722469 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,8 @@ --- -title: Overview +title: Nuxt Icon description: 'Add 200,000+ ready to use icons to your Nuxt application.' +navigation: + title: Overview --- ![Nuxt Icon](https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce) From ad4c0dc1e0887f99a09d96ca89581d96693e9f40 Mon Sep 17 00:00:00 2001 From: Amp Date: Sun, 25 Oct 2026 12:34:54 +0000 Subject: [PATCH 3/6] docs: drop the section icons from the docs navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 Co-authored-by: Sébastien Chopin --- docs/1.getting-started/.navigation.yml | 1 - docs/2.guide/.navigation.yml | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/1.getting-started/.navigation.yml b/docs/1.getting-started/.navigation.yml index dacc69b9..bcd2ba14 100644 --- a/docs/1.getting-started/.navigation.yml +++ b/docs/1.getting-started/.navigation.yml @@ -1,2 +1 @@ title: Getting Started -icon: i-lucide-rocket diff --git a/docs/2.guide/.navigation.yml b/docs/2.guide/.navigation.yml index aa0bc997..aff9b7cb 100644 --- a/docs/2.guide/.navigation.yml +++ b/docs/2.guide/.navigation.yml @@ -1,2 +1 @@ title: Guide -icon: i-lucide-book-open From e9f81a0ea79bfda6764d77a50c0e0a7722722bae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Mon, 26 Oct 2026 16:31:14 +0000 Subject: [PATCH 4/6] docs: flatten into seven pages Quick Start (install with `nuxt add`, Vite usage), Usage (with the render function), Configuration, Server & Client Bundle, Icon Customization, Custom Collections and Testing. Links that pointed at README anchors now point at their pages. Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 --- docs/1.getting-started/.navigation.yml | 1 - docs/1.getting-started/1.installation.md | 38 ----- .../2.usage.md => 1.usage.md} | 24 +++- ...{3.configuration.md => 2.configuration.md} | 0 docs/2.guide/.navigation.yml | 1 - docs/2.guide/4.client-bundle.md | 115 --------------- docs/2.guide/5.vite-plugin.md | 46 ------ docs/2.guide/6.render-function.md | 24 ---- .../3.server-bundle.md => 3.bundles.md} | 131 ++++++++++++++++-- .../2.customization.md => 4.customization.md} | 0 ...collections.md => 5.custom-collections.md} | 2 +- docs/{2.guide/7.testing.md => 6.testing.md} | 0 docs/index.md | 84 ++++++++++- 13 files changed, 228 insertions(+), 238 deletions(-) delete mode 100644 docs/1.getting-started/.navigation.yml delete mode 100644 docs/1.getting-started/1.installation.md rename docs/{1.getting-started/2.usage.md => 1.usage.md} (80%) rename docs/{3.configuration.md => 2.configuration.md} (100%) delete mode 100644 docs/2.guide/.navigation.yml delete mode 100644 docs/2.guide/4.client-bundle.md delete mode 100644 docs/2.guide/5.vite-plugin.md delete mode 100644 docs/2.guide/6.render-function.md rename docs/{2.guide/3.server-bundle.md => 3.bundles.md} (55%) rename docs/{2.guide/2.customization.md => 4.customization.md} (100%) rename docs/{2.guide/1.custom-collections.md => 5.custom-collections.md} (96%) rename docs/{2.guide/7.testing.md => 6.testing.md} (100%) diff --git a/docs/1.getting-started/.navigation.yml b/docs/1.getting-started/.navigation.yml deleted file mode 100644 index bcd2ba14..00000000 --- a/docs/1.getting-started/.navigation.yml +++ /dev/null @@ -1 +0,0 @@ -title: Getting Started diff --git a/docs/1.getting-started/1.installation.md b/docs/1.getting-started/1.installation.md deleted file mode 100644 index 67282d28..00000000 --- a/docs/1.getting-started/1.installation.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Installation -description: 'Add Nuxt Icon to your Nuxt application.' ---- - -Run the following command to add the module to your project: - -```bash -npx nuxi module add icon -``` - -That's it, you can now use the `` in your components! - -✨ If you are using VS Code, you can use the [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) extension by [@antfu](https://github.com/antfu) - - -
-Manual Setup - -You can install the module manually with: - -```bash -npm i @nuxt/icon -``` - -Update your `nuxt.config.ts` - -```ts -export default defineNuxtConfig({ - modules: [ - '@nuxt/icon' - ] -}) -``` - -If you have the legacy module `nuxt-icon` installed, you might want to remove it from the `modules` list. - -
diff --git a/docs/1.getting-started/2.usage.md b/docs/1.usage.md similarity index 80% rename from docs/1.getting-started/2.usage.md rename to docs/1.usage.md index ad214a53..57642ba5 100644 --- a/docs/1.getting-started/2.usage.md +++ b/docs/1.usage.md @@ -70,7 +70,7 @@ When the `name` matches a global registered component, it will be rendered as th ``` -Note that `MyComponent` needs to be inside `components/global/` folder (see [example](https://github.com/nuxt-modules/icon/blob/main/playgrounds/nuxt/components/global/NuxtLogo.vue)). +Note that `MyComponent` needs to be inside `components/global/` folder (see [example](https://github.com/nuxt/icon/blob/main/playgrounds/nuxt/components/global/NuxtLogo.vue)). > [!TIP] > You can also change the component name with: @@ -82,3 +82,25 @@ Note that `MyComponent` needs to be inside `components/global/` folder (see [exa > } > }) > ``` + +## Render Function + +You can use the `Icon` component in a render function (useful if you create a functional component), for this you can import it from `#components`: + +```ts +import { Icon } from '#components' +``` + +See an example of a `` component: + +```vue + + + +``` diff --git a/docs/3.configuration.md b/docs/2.configuration.md similarity index 100% rename from docs/3.configuration.md rename to docs/2.configuration.md diff --git a/docs/2.guide/.navigation.yml b/docs/2.guide/.navigation.yml deleted file mode 100644 index aff9b7cb..00000000 --- a/docs/2.guide/.navigation.yml +++ /dev/null @@ -1 +0,0 @@ -title: Guide diff --git a/docs/2.guide/4.client-bundle.md b/docs/2.guide/4.client-bundle.md deleted file mode 100644 index a655d68d..00000000 --- a/docs/2.guide/4.client-bundle.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Client Bundle -description: 'Ship the icons you use with the client to avoid network requests.' ---- - -For icons that you know you are going to use frequently, you can bundle them with your client bundle to avoid network requests. - -## Prefetch (Preload) Icons - -If you want icons to be available on first render, use the client bundle as the prefetch mechanism: - -```ts -export default defineNuxtConfig({ - modules: [ - '@nuxt/icon', - ], - icon: { - clientBundle: { - // Explicitly pre-bundle known icons - icons: ['uil:github', 'heroicons:home'], - // Keep disabled if you only want explicit entries - scan: false, - }, - }, -}) -``` - -You can also enable static scanning to pre-bundle icons referenced literally in your source files: - -```ts -export default defineNuxtConfig({ - modules: [ - '@nuxt/icon', - ], - icon: { - clientBundle: { - // Automatically includes statically-detected icon usages - scan: true, - // Keep explicit entries for dynamic icon names - icons: ['uil:github'], - }, - }, -}) -``` - -If you want to disable runtime icon fetching entirely, see [Disabling Runtime Fetching](#disabling-runtime-fetching) for the `provider: 'none'` + client bundle pattern. - -> [!TIP] -> Static scanning only detects literal icon names. See [Scan Components](#scan-components) for details and examples, and [Rendering Icons in Component Tests](#rendering-icons-in-component-tests) for test-environment setup. - -## Available Options - -```ts -export default defineNuxtConfig({ - modules: [ - '@nuxt/icon' - ], - icon: { - clientBundle: { - // list of icons to include in the client bundle - icons: [ - 'uil:github', - 'logos:vitejs' - ], - - // scan all components in the project and include icons - scan: true, - - // include all custom collections in the client bundle - includeCustomCollections: true, - - // guard for uncompressed bundle size, will fail the build if exceeds - sizeLimitKb: 256, - }, - }, -}) -``` - -`includeCustomCollections` will include all the custom collections you have defined in `icon.customCollections` in the client bundle. It's disabled by default when both sides of `provider` use `server`, and enabled otherwise (e.g. when `ssr: false` is set). - -## Scan Components - -When `scan` is enabled, the module will scan all the components in your project and include the icons used in the client bundle. This would significantly reduce the number of network requests needed for statically known icons, but might also increase the client bundle size depending on the number of icons used in your project. - -You can also fine-tune tine scanning targets like: - -```ts -export default defineNuxtConfig({ - modules: [ - '@nuxt/icon' - ], - icon: { - clientBundle: { - scan: { - // note that when you specify those values, the default behavior will be overridden - globInclude: ['components/**/*.vue', /* ... */], - globExclude: ['node_modules', 'dist', /* ... */], - }, - }, - }, -}) -``` - -> [!TIP] -> Scanning is relying on static analysis, which means only literal usages will be detected. Avoid constructing the icon name dynamically whenever possible. -> -> ```vue -> -> ``` diff --git a/docs/2.guide/5.vite-plugin.md b/docs/2.guide/5.vite-plugin.md deleted file mode 100644 index 83cc9f14..00000000 --- a/docs/2.guide/5.vite-plugin.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Vite Plugin -description: 'Use Nuxt Icon without Nuxt.' ---- - -If you are building a plain Vue app with Vite (for example when using [Nuxt UI's Vue integration](https://ui.nuxt.com/docs/getting-started/integrations/vue)), there is no Nuxt server to serve icons from, and `@iconify/vue` would fetch icons from the Iconify API at runtime. To render icons offline (and during SSR) without network requests, `@nuxt/icon` ships a standalone Vite plugin that pre-bundles the icons you use into the client build: - -```ts -// vite.config.ts -import { defineConfig } from 'vite' -import { NuxtIconBundle } from '@nuxt/icon/vite' - -export default defineConfig({ - plugins: [ - NuxtIconBundle({ - // Explicitly pre-bundle known icons (hard-fails the build when missing locally) - icons: ['uil:github', 'heroicons:home'], - // Scanning your source files for icon usages is enabled by default - scan: true, - }), - ], -}) -``` - -Then register the bundled icons once in your entry file: - -```ts -// main.ts -import 'virtual:nuxt-icon-bundle/register' -``` - -Make sure the icon collections you use are installed locally (e.g. `npm i -D @iconify-json/uil`), and add the type shims for the virtual modules to your `tsconfig.json`: - -```json -{ - "compilerOptions": { - "types": ["@nuxt/icon/client"] - } -} -``` - -The plugin accepts the same options as `icon.clientBundle` (`icons`, `scan`, `sizeLimitKb`), plus `customCollections` — with two differences in defaults: `scan` is enabled by default (bundling is the whole point of the plugin), and `includeCustomCollections` is always enabled by default (there is no server provider to fall back to). - -For library and framework authors integrating icons themselves: `virtual:nuxt-icon-bundle` exports `init(addIcon)` so you can register the bundled data on your own copy of `@iconify/vue` (or any compatible store), and the underlying primitives (`IconUsageScanner`, `resolveBundleIcons`, `generateClientBundleCode`, ...) are exported from `@nuxt/icon/utils`. - -See [`playgrounds/vite/`](https://github.com/nuxt/icon/tree/main/playgrounds/vite) for a working example (`pnpm play:vite` to run it locally). diff --git a/docs/2.guide/6.render-function.md b/docs/2.guide/6.render-function.md deleted file mode 100644 index 8a10d74b..00000000 --- a/docs/2.guide/6.render-function.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Render Function -description: 'Render icons from a render function.' ---- - -You can use the `Icon` component in a render function (useful if you create a functional component), for this you can import it from `#components`: - -```ts -import { Icon } from '#components' -``` - -See an example of a `` component: - -```vue - - - -``` diff --git a/docs/2.guide/3.server-bundle.md b/docs/3.bundles.md similarity index 55% rename from docs/2.guide/3.server-bundle.md rename to docs/3.bundles.md index 5bd6b53c..92e2940b 100644 --- a/docs/2.guide/3.server-bundle.md +++ b/docs/3.bundles.md @@ -1,15 +1,17 @@ --- -title: Server Bundle -description: 'Choose how icons are bundled and served by your Nuxt server.' +title: Server & Client Bundle +description: 'Choose how icons are served by your Nuxt server, and which ones ship with the client.' --- +## Server Bundle + Since `@nuxt/icon` v1.0, we have introduced the server bundle concept to serve the icons from Nuxt server endpoints. This keeps the client bundle lean and able to load icons on-demand, while having all the dynamic features to use icons that might not be known at build time. -## Server Bundle Mode: `local` +### Server Bundle Mode: `local` This mode will bundle the icon collections you have installed locally (like `@iconify-json/*`), into your server bundle as dynamic chunks. The collection data will be loaded on-demand, only when your client request icons from that collection. -## Server Bundle Mode: `remote` +### Server Bundle Mode: `remote` Introduced in `@nuxt/icon` v1.2, you can now use the `remote` server bundle to serve the icons from a remote CDN. @@ -45,11 +47,11 @@ Under the hood, instead of bundling `() => import('@iconify-json/ph/icons.json') This would be useful when server bundle size is a concern, like in serverless or worker environments. -## Server Bundle Mode: `auto` +### Server Bundle Mode: `auto` This is the default option, where the module will pick between `local` and `remote` based your deployment environment. `local` will be preffered unless you are deploying to a serverless or worker environment, like Vercel Edge or Cloudflare Workers. -## Externalize Icons JSON +### Externalize Icons JSON By default, Nitro will bundle the icon collections you have installed locally (like `@iconify-json/*`), into your server bundle as dynamic chunks. When you have a large number of icons, this might make your bundling process slow and memory-intensive. You can change to externalize the icons JSON files by setting `icon.serverBundle.externalizeIconsJson` to `true`. @@ -72,7 +74,7 @@ Also note that in some serverless environments, like Cloudflare Workers, where t This option will be ignored when `icon.serverBundle.remote` is enabled. -## Completely Disable Server Bundle +### Completely Disable Server Bundle If you want to disable the server bundle completely, you can set `icon.serverBundle` to `false` and `provider` to `iconify` @@ -90,7 +92,7 @@ export default defineNuxtConfig({ This will make requests to Iconify API every time the client requests an icon. We do not recommend doing so unless the other options are not feasible. -## Separate Server and Client Providers +### Separate Server and Client Providers `provider` can also be set separately for SSR and for the browser. @@ -114,3 +116,116 @@ export default defineNuxtConfig({ - The local endpoint is enabled when at least one side uses `server`, and so is the server bundle unless `serverBundle` is `false`. This is decided at build time, so overriding `provider` in `app.config.ts` does not enable or disable them. - `provider` in `app.config.ts` is not validated: set both `server` and `client` there too. A side left out is taken from the module options when they also use the object form; otherwise it is treated as unset and falls back to the `iconify` provider. - Unless both sides use `server`, `clientBundle.includeCustomCollections` defaults to `true`, since the client bundle is also used during SSR. + +## Client Bundle + +For icons that you know you are going to use frequently, you can bundle them with your client bundle to avoid network requests. + +### Prefetch (Preload) Icons + +If you want icons to be available on first render, use the client bundle as the prefetch mechanism: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon', + ], + icon: { + clientBundle: { + // Explicitly pre-bundle known icons + icons: ['uil:github', 'heroicons:home'], + // Keep disabled if you only want explicit entries + scan: false, + }, + }, +}) +``` + +You can also enable static scanning to pre-bundle icons referenced literally in your source files: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon', + ], + icon: { + clientBundle: { + // Automatically includes statically-detected icon usages + scan: true, + // Keep explicit entries for dynamic icon names + icons: ['uil:github'], + }, + }, +}) +``` + +If you want to disable runtime icon fetching entirely, see [Disabling Runtime Fetching](/modules/icon/custom-collections#disabling-runtime-fetching) for the `provider: 'none'` + client bundle pattern. + +> [!TIP] +> Static scanning only detects literal icon names. See [Scan Components](#scan-components) for details and examples, and [Rendering Icons in Component Tests](/modules/icon/testing) for test-environment setup. + +### Available Options + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + clientBundle: { + // list of icons to include in the client bundle + icons: [ + 'uil:github', + 'logos:vitejs' + ], + + // scan all components in the project and include icons + scan: true, + + // include all custom collections in the client bundle + includeCustomCollections: true, + + // guard for uncompressed bundle size, will fail the build if exceeds + sizeLimitKb: 256, + }, + }, +}) +``` + +`includeCustomCollections` will include all the custom collections you have defined in `icon.customCollections` in the client bundle. It's disabled by default when both sides of `provider` use `server`, and enabled otherwise (e.g. when `ssr: false` is set). + +### Scan Components + +When `scan` is enabled, the module will scan all the components in your project and include the icons used in the client bundle. This would significantly reduce the number of network requests needed for statically known icons, but might also increase the client bundle size depending on the number of icons used in your project. + +You can also fine-tune tine scanning targets like: + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ], + icon: { + clientBundle: { + scan: { + // note that when you specify those values, the default behavior will be overridden + globInclude: ['components/**/*.vue', /* ... */], + globExclude: ['node_modules', 'dist', /* ... */], + }, + }, + }, +}) +``` + +> [!TIP] +> Scanning is relying on static analysis, which means only literal usages will be detected. Avoid constructing the icon name dynamically whenever possible. +> +> ```vue +> +> ``` diff --git a/docs/2.guide/2.customization.md b/docs/4.customization.md similarity index 100% rename from docs/2.guide/2.customization.md rename to docs/4.customization.md diff --git a/docs/2.guide/1.custom-collections.md b/docs/5.custom-collections.md similarity index 96% rename from docs/2.guide/1.custom-collections.md rename to docs/5.custom-collections.md index 7d1c33a7..b4c9db7d 100644 --- a/docs/2.guide/1.custom-collections.md +++ b/docs/5.custom-collections.md @@ -92,7 +92,7 @@ export default defineNuxtConfig({ ## Disabling Runtime Fetching -Or if you want to disable the dynamic icon fetching completely and only use icons from the [client bundle](#client-bundle), you can set `provider: 'none'`: +Or if you want to disable the dynamic icon fetching completely and only use icons from the [client bundle](/modules/icon/bundles#client-bundle), you can set `provider: 'none'`: ```ts export default defineNuxtConfig({ diff --git a/docs/2.guide/7.testing.md b/docs/6.testing.md similarity index 100% rename from docs/2.guide/7.testing.md rename to docs/6.testing.md diff --git a/docs/index.md b/docs/index.md index dd722469..6ccf5e9c 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,14 +2,14 @@ title: Nuxt Icon description: 'Add 200,000+ ready to use icons to your Nuxt application.' navigation: - title: Overview + title: Quick Start --- ![Nuxt Icon](https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce) Add [200,000+ ready to use icons](https://icones.js.org) to your [Nuxt](https://nuxt.com) application, based on [Iconify](https://iconify.design). -- [✨  Release Notes](https://github.com/nuxt-modules/icon/releases) +- [✨  Release Notes](https://github.com/nuxt/icon/releases) - [🏀  Online playground](https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue) ## Features ✨ @@ -20,4 +20,82 @@ Add [200,000+ ready to use icons](https://icones.js.org) to your [Nuxt](https:// - Support both CSS mode / SVG mode - Custom SVG support (via Vue component, or via local SVG files) -Head over to [Installation](/modules/icon/getting-started/installation) to get started. +## Installation + +Run the following command to add the module to your project, with the [`nuxt add`](/docs/api/commands/add) command: + +```bash +npx nuxt add icon +``` + +That's it, you can now use the `` in your components, see [Usage](/modules/icon/usage). + +✨ If you are using VS Code, you can use the [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) extension by [@antfu](https://github.com/antfu) + + +
+Manual Setup + +You can install the module manually with: + +```bash +npm i @nuxt/icon +``` + +Update your `nuxt.config.ts` + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxt/icon' + ] +}) +``` + +If you have the legacy module `nuxt-icon` installed, you might want to remove it from the `modules` list. + +
+ +## Vite (without Nuxt) + +If you are building a plain Vue app with Vite (for example when using [Nuxt UI's Vue integration](https://ui.nuxt.com/docs/getting-started/integrations/vue)), there is no Nuxt server to serve icons from, and `@iconify/vue` would fetch icons from the Iconify API at runtime. To render icons offline (and during SSR) without network requests, `@nuxt/icon` ships a standalone Vite plugin that pre-bundles the icons you use into the client build: + +```ts +// vite.config.ts +import { defineConfig } from 'vite' +import { NuxtIconBundle } from '@nuxt/icon/vite' + +export default defineConfig({ + plugins: [ + NuxtIconBundle({ + // Explicitly pre-bundle known icons (hard-fails the build when missing locally) + icons: ['uil:github', 'heroicons:home'], + // Scanning your source files for icon usages is enabled by default + scan: true, + }), + ], +}) +``` + +Then register the bundled icons once in your entry file: + +```ts +// main.ts +import 'virtual:nuxt-icon-bundle/register' +``` + +Make sure the icon collections you use are installed locally (e.g. `npm i -D @iconify-json/uil`), and add the type shims for the virtual modules to your `tsconfig.json`: + +```json +{ + "compilerOptions": { + "types": ["@nuxt/icon/client"] + } +} +``` + +The plugin accepts the same options as `icon.clientBundle` (`icons`, `scan`, `sizeLimitKb`), plus `customCollections` — with two differences in defaults: `scan` is enabled by default (bundling is the whole point of the plugin), and `includeCustomCollections` is always enabled by default (there is no server provider to fall back to). + +For library and framework authors integrating icons themselves: `virtual:nuxt-icon-bundle` exports `init(addIcon)` so you can register the bundled data on your own copy of `@iconify/vue` (or any compatible store), and the underlying primitives (`IconUsageScanner`, `resolveBundleIcons`, `generateClientBundleCode`, ...) are exported from `@nuxt/icon/utils`. + +See [`playgrounds/vite/`](https://github.com/nuxt/icon/tree/main/playgrounds/vite) for a working example (`pnpm play:vite` to run it locally). From 97c77dbb560941a5a23dd1c976adbb801ece23d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Mon, 26 Oct 2026 16:41:47 +0000 Subject: [PATCH 5/6] docs: drop the Features emoji, keep long code out of sentences Two long inline snippets overflowed narrow screens: one becomes code blocks, the other is shortened. Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 --- docs/3.bundles.md | 12 +++++++++++- docs/5.custom-collections.md | 2 +- docs/index.md | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/3.bundles.md b/docs/3.bundles.md index 92e2940b..b27b5c55 100644 --- a/docs/3.bundles.md +++ b/docs/3.bundles.md @@ -43,7 +43,17 @@ export default defineNuxtConfig({ Which will make server requests to `https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json` to fetch the icons at runtime, instead of bundling them with your server. -Under the hood, instead of bundling `() => import('@iconify-json/ph/icons.json')` to your server bundle, it will now use something like `() => fetch('https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json').then(res => res.json())`, where the collections are not inlined. +Under the hood, instead of bundling the collection into your server: + +```ts +() => import('@iconify-json/ph/icons.json') +``` + +it will now use something like this, where the collections are not inlined: + +```ts +() => fetch('https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json').then(res => res.json()) +``` This would be useful when server bundle size is a concern, like in serverless or worker environments. diff --git a/docs/5.custom-collections.md b/docs/5.custom-collections.md index b4c9db7d..f55fe83f 100644 --- a/docs/5.custom-collections.md +++ b/docs/5.custom-collections.md @@ -34,7 +34,7 @@ export default defineNuxtConfig({ ``` > [!NOTE] -> A relative `dir` is resolved from the directory of the project that declares it. When your project is used as an [extendable layer](https://nuxt.com/docs/4.x/getting-started/layers), the icons are loaded from the layer's own directory, not from the consuming project. Absolute paths, such as `createResolver(import.meta.url).resolve('./assets/my-icons')`, keep working as before. +> A relative `dir` is resolved from the directory of the project that declares it. When your project is used as an [extendable layer](https://nuxt.com/docs/4.x/getting-started/layers), the icons are loaded from the layer's own directory, not from the consuming project. Absolute paths, such as one built with `createResolver(import.meta.url)`, keep working as before. > [!NOTE] > If you are running on Nuxt 4 with the new `app` directory, the assets directory is `'./app/assets/*'` instead of `'./assets/*'`. diff --git a/docs/index.md b/docs/index.md index 6ccf5e9c..e412c0da 100644 --- a/docs/index.md +++ b/docs/index.md @@ -12,7 +12,7 @@ Add [200,000+ ready to use icons](https://icones.js.org) to your [Nuxt](https:// - [✨  Release Notes](https://github.com/nuxt/icon/releases) - [🏀  Online playground](https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue) -## Features ✨ +## Features - Nuxt 3 ready - SSR friendly From bd7698929c0549adf900465344602d1c9169dbaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Mon, 26 Oct 2026 16:59:19 +0000 Subject: [PATCH 6/6] docs: open Quick Start on the features The module page header already introduces the module: drop the banner, the intro line, the release notes and playground links, and the outdated `Nuxt 3 ready` bullet. Amp-Thread-ID: https://ampcode.com/threads/T-01a1721c-4512-7150-9905-efce9f4b7f68 --- docs/index.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/index.md b/docs/index.md index e412c0da..1767f934 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,16 +5,8 @@ navigation: title: Quick Start --- -![Nuxt Icon](https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce) - -Add [200,000+ ready to use icons](https://icones.js.org) to your [Nuxt](https://nuxt.com) application, based on [Iconify](https://iconify.design). - -- [✨  Release Notes](https://github.com/nuxt/icon/releases) -- [🏀  Online playground](https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue) - ## Features -- Nuxt 3 ready - SSR friendly - Support 200,000 open-source vector icons via [Iconify](https://iconify.design) - Support both CSS mode / SVG mode