### Typed Configuration Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of using type-safe configuration for the Nuxt Icon module in nuxt.config.ts.

```typescript
import type { ModuleOptions } from '@nuxt/icon'

export default defineNuxtConfig({
  icon: {
    // Type-checked configuration
  } satisfies ModuleOptions
})
```

--------------------------------

### Custom Hooks

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of defining and calling a custom hook for the Nuxt Icon module.

```typescript
declare module '@nuxt/schema' {
  interface NuxtHooks {
    'icon:custom'(data: CustomData): void | Promise<void>
  }
}

// Call hook
await nuxt.callHook('icon:custom', { /* data */ })
```

--------------------------------

### Basic Setup

Source: https://github.com/nuxt/icon/blob/main/_autodocs/configuration.md

Module-level options passed during setup phase.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    // Module options here
  }
})
```

--------------------------------

### Install Nuxt Icon

Source: https://github.com/nuxt/icon/blob/main/README.md

Install the Nuxt Icon module using npx.

```bash
npx nuxi module add icon
```

--------------------------------

### Basic Usage Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Basic example of using the Icon component.

```vue
<template>
  <Icon name="uil:github" />
</template>
```

--------------------------------

### Using the Icon Component

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of using the globally registered Icon component in a Vue template.

```vue
<!-- Automatically available -->
<Icon name="uil:github" />
```

--------------------------------

### Installation

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Install the Nuxt Icon module using npm.

```bash
npm install @nuxt/icon
```

--------------------------------

### Provider Priority Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Example of resource provider priority used by Iconify.

```typescript
resources = [
  '/api/_nuxt_icon',           // Try local first
  'https://api.iconify.design' // Fall back to API
]
```

--------------------------------

### Size Examples

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Examples of using the 'size' prop with different units.

```vue
<template>
  <!-- Using CSS units -->
  <Icon name="uil:github" size="24px" />
  
  <!-- Using numeric value (interpreted as pixels) -->
  <Icon name="uil:github" :size="32" />
  
  <!-- Using em units -->
  <Icon name="uil:github" size="1.5em" />
</template>
```

--------------------------------

### Request Examples

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Examples of GET requests to the icon collection endpoint.

```http
GET /api/_nuxt_icon/uil
GET /api/_nuxt_icon/uil.json
GET /api/_nuxt_icon/uil?icons=github,home,menu
GET /api/_nuxt_icon/mdi?icons=account,settings,logout
```

--------------------------------

### Install Icon Collection

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Command to install an icon collection and verify its installation.

```bash
# Install the icon collection
npm install -D @iconify-json/uil

Verify collection is installed:
ls node_modules/@iconify-json/uil/
```

--------------------------------

### Using Custom Component Name

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of using the custom component name in a Vue template.

```vue
<!-- Now use NuxtIcon -->
<NuxtIcon name="uil:github" />
```

--------------------------------

### Development Setup

Source: https://github.com/nuxt/icon/blob/main/README.md

Steps to set up the development environment for the Nuxt Icon module.

```bash
pnpm install
npm run dev:prepare
npm run dev
```

--------------------------------

### icon:clientBundleIcons Hook Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of how to use the `icon:clientBundleIcons` hook in `nuxt.config.ts` to dynamically add or remove icons from the client bundle based on conditions.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  hooks: {
    'icon:clientBundleIcons'(icons) {
      // Add user preferences
      if (usePreferredTheme() === 'dark') {
        icons.add('uil:moon')
      } else {
        icons.add('uil:sun')
      }
      
      // Add all status icons
      ['success', 'warning', 'error', 'info'].forEach(status => {
        icons.add(`status:${status}`)
      })
    }
  }
})
```

--------------------------------

### Disable Fallback to API

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Instructions to install collections locally or disable fallback to Iconify API.

```bash
# Install collection locally
npm install -D @iconify-json/uil

# Or disable fallback
export default defineNuxtConfig({
  icon: {
    fallbackToApi: false
  }
})
```

--------------------------------

### Runtime Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/INDEX.md

Example of runtime configuration options.

```typescript
export default defineAppConfig({
  icon: {
    size: '24px',
    class: 'icon',
    mode: 'css',
    aliases: { 'github': 'uil:github' },
    cssSelectorPrefix: 'i-',
    cssLayer: undefined,
    customize: undefined
  }
})
```

--------------------------------

### Main Configuration Options

Source: https://github.com/nuxt/icon/blob/main/_autodocs/INDEX.md

Example of main configuration options in Nuxt config.

```typescript
export default defineNuxtConfig({
  icon: {
    // Component & Rendering
    componentName: 'Icon',
    mode: 'css',
    size: undefined,
    class: '',
    
    // Bundling
    serverBundle: 'auto',      // 'auto' | 'local' | 'remote' | false
    clientBundle: { icons: [], scan: false },
    
    // Collections
    customCollections: [],
    
    // Providers
    provider: 'server',        // 'server' | 'iconify' | 'none'
    iconifyApiEndpoint: 'https://api.iconify.design',
    fallbackToApi: true,
    localApiEndpoint: '/api/_nuxt_icon'
  }
})
```

--------------------------------

### Basic Module Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Basic setup of the Nuxt Icon module in nuxt.config.ts.

```typescript
export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'  // Basic setup with defaults
  ]
})
```

--------------------------------

### Usage Example with Fetch API

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Using the Fetch API to get icon data.

```typescript
const response = await fetch('/api/_nuxt_icon/mdi?icons=account,home')
const data = await response.json()
```

--------------------------------

### icon:serverKnownCssClasses Hook Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Example of how to use the `icon:serverKnownCssClasses` hook in `nuxt.config.ts` to add custom known CSS selectors for server-side rendering.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  hooks: {
    'icon:serverKnownCssClasses'(selectors) {
      // Add custom known selectors
      selectors.push('i-custom-icon')
      selectors.push('i-branded-logo')
    }
  }
})
```

--------------------------------

### Using Aliases Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of using an icon alias defined in the app configuration.

```vue
<template>
  <!-- Uses alias defined above -->
  <Icon name="github" />
</template>
```

--------------------------------

### Manual Installation

Source: https://github.com/nuxt/icon/blob/main/README.md

Manually install the module using npm and update nuxt.config.ts.

```bash
npm i @nuxt/icon
```

```typescript
export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ]
})
```

--------------------------------

### Alias Configuration Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of configuring icon aliases in app.config.ts.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    aliases: {
      'github': 'uil:github',
      'home': 'uil:home'
    }
  }
})
```

--------------------------------

### Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Example of using createMatchRegex to match icon names.

```typescript
import { createMatchRegex } from '@nuxt/icon'

const regex = createMatchRegex(['uil', 'mdi', 'simple-icons'])
const code = 'Icon name="uil:github" and Icon name="mdi:home"'

const matches = [...code.matchAll(regex)]
// matches[0] = ['uil:github', 'uil', 'github']
// matches[1] = ['mdi:home', 'mdi', 'home']
```

--------------------------------

### Loading State Handling Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Vue Suspense example for handling loading states with the Icon component.

```vue
<Suspense>
  <template #default>
    <Icon name="uil:github" />
  </template>
  
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>
```

--------------------------------

### Server-Side Prefetching Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Example of server-side prefetching icon data using useAsyncData.

```typescript
onServerPrefetch(async () => {
  if (import.meta.server) {
    await useAsyncData(
      'i-' + iconName,
      async () => await loadIcon(iconName, fetchTimeout),
      { deep: false }
    )
  }
})
```

--------------------------------

### Install Icon Collection Locally

Source: https://github.com/nuxt/icon/blob/main/README.md

Install a specific icon collection locally for faster and more reliable serving.

```bash
npm i -D @iconify-json/collection-name
```

--------------------------------

### Query String Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Example of how to specify multiple icons to fetch from a collection.

```http
?icons=icon1,icon2,icon3
```

--------------------------------

### isFileMatch Examples

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Examples demonstrating the behavior of isFileMatch.

```typescript
scanner.isFileMatch('components/Button.vue')  // true
scanner.isFileMatch('node_modules/foo.vue')   // false
scanner.isFileMatch('src/utils.ts')           // false (not in globInclude)
```

--------------------------------

### Usage Example with $fetch

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Using $fetch (Nuxt auto-imported) to get icon data.

```typescript
// Using $fetch (Nuxt auto-imported)
const data = await $fetch('/api/_nuxt_icon/uil', {
  query: {
    icons: 'github,home,settings'
  }
})

console.log(data.icons.github.body) // SVG content
```

--------------------------------

### Example customize callback

Source: https://github.com/nuxt/icon/blob/main/_autodocs/types.md

Example of a customize callback function.

```typescript
const customize = (content: string, name?: string) => {
  return content
    .replace(/stroke-width="[^"]*"/g, 'stroke-width="2"')
    .replace(/stroke="[^"]*"/g, 'stroke="#FF0000"')
    .replace(/fill="[^"]*"/g, 'fill="#FF0000"')
}
```

--------------------------------

### Configuration Priority Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/configuration.md

Demonstrates how component props override app config settings.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    size: '20px'
  }
})
```

```vue
<!-- Component prop overrides app config -->
<Icon name="uil:github" size="24px" />  <!-- Uses 24px, not 20px -->
```

--------------------------------

### Key Functions

Source: https://github.com/nuxt/icon/blob/main/_autodocs/INDEX.md

Examples of key functions for loading icons, resolving names, and scanning for icons.

```typescript
// Load icon data
import { loadIcon } from '@nuxt/icon'
const icon = await loadIcon('uil:github', 1500)

// Use in components (from shared utilities)
import { useResolvedName, resolveCustomizeFn } from '@nuxt/icon'
const resolved = useResolvedName(() => 'icon-name')

// Scan for icons
import { IconUsageScanner } from '@nuxt/icon'
const scanner = new IconUsageScanner(true)
const icons = await scanner.scanFiles(nuxt)
```

--------------------------------

### CSS Selector Prefix Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Examples of using the CSS selector format for icon names.

```vue
<template>
  <!-- Equivalent to name="uil:github" -->
  <Icon name="i-uil-github" />
  
  <!-- With custom prefix from app config -->
  <!-- If cssSelectorPrefix is 'icon-' -->
  <Icon name="icon-uil-github" />
</template>
```

--------------------------------

### Module Definition

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Defines the Nuxt Icon module using `defineNuxtModule` with meta information, default options, and the setup function.

```typescript
export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@nuxt/icon',
    configKey: 'icon',
    compatibility: {
      nuxt: '>=4.0.0',
    },
  },
  defaults: {
    componentName: 'Icon',
    serverBundle: 'auto',
    serverKnownCssClasses: [],
    clientBundle: { icons: [] },
    provider: 'server' | 'iconify',  // Based on SSR mode
    // ... other defaults from schema
  },
  async setup(options, nuxt) {
    // Module setup implementation
  }
})
```

--------------------------------

### Server Bundle Registration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Code snippet for registering the server bundle with code generation.

```typescript
registerServerBundle(ctx)  // Generates nuxt-icon-server-bundle.mjs
```

--------------------------------

### Client Bundle Registration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Code snippet for registering the client bundle with code generation.

```typescript
registerClientBundle(ctx)  // Generates nuxt-icon-client-bundle.mjs
```

--------------------------------

### TypeScript Configuration Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Example of how to configure the Nuxt Icon module in your Nuxt configuration file with TypeScript support.

```typescript
import type { NuxtIconRuntimeOptions, ModuleOptions } from "@nuxt/icon"

export default defineNuxtConfig({
  icon: {
    provider: 'server'
  } satisfies ModuleOptions
})
```

--------------------------------

### CSS Selector Prefix Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Configuration for the CSS selector prefix, including default and custom examples.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    cssSelectorPrefix: 'i-'  // Default
  }
})

<!-- These are equivalent -->
<Icon name="uil:github" />
<Icon name="i-uil-github" />

// app.config.ts
export default defineAppConfig({
  icon: {
    cssSelectorPrefix: 'icon-'
  }
})

<!-- Now use with custom prefix -->
<Icon name="icon-uil-github" />
```

--------------------------------

### Icon Name Watcher Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Vue watcher example demonstrating how the icon name change triggers updates.

```typescript
watch(
  () => props.name,
  () => {
    // Load new icon
    // Generate CSS
    // Inject into DOM
  },
  { immediate: true }
)
```

--------------------------------

### Server-Side Prefetching Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Demonstrates prefetching an icon on the server using `onServerPrefetch`.

```typescript
import { loadIcon } from '@nuxt/icon'
import { onServerPrefetch } from 'nuxt'

export default defineComponent({
  async setup() {
    onServerPrefetch(async () => {
      await loadIcon('uil:github', 1500)
    })
  }
})
```

--------------------------------

### Attributes Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of passing native element attributes to the Icon component.

```vue
<Icon 
  name="uil:github" 
  style="color: black" 
  title="GitHub"
  @click="handleClick"
/>
```

--------------------------------

### Usage Example with BaseURL

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Fetching icons with a BaseURL.

```typescript
const baseURL = useRuntimeConfig().app.baseURL

const response = await fetch(
  `${baseURL}api/_nuxt_icon/uil?icons=github,home`
)
```

--------------------------------

### Consistent Icon Name for SSR

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Example demonstrating the correct way to use dynamic icon names in Vue templates to avoid hydration mismatches between server and client.

```vue
<!-- ❌ Don't do this -->
<Icon :name="isDark ? 'moon' : 'sun'" />

<!-- ✅ Do this -->
<Icon :name="isDark ? 'uil:moon' : 'uil:sun'" />
```

--------------------------------

### Debugging Example Console Output

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Example console output during debugging.

```text
// Example console output:
// [Icon] serving `uil:github` from bundled collection
// [Icon] fetching `mdi:home` from iconify api
// [Icon] Collection `custom` is not found locally
```

--------------------------------

### Client Hydration Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of how data from the SSR payload is registered with Iconify on the client.

```typescript
const payload = nuxt.payload.data['uil-github']
if (payload) {
  addIcon('uil:github', payload)
}
```

--------------------------------

### SVG Mode Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of using the Icon component in SVG mode.

```vue
<template>
  <Icon name="uil:github" mode="svg" />
</template>
```

--------------------------------

### Scan Components Configuration

Source: https://github.com/nuxt/icon/blob/main/README.md

Configuration example for enabling and fine-tuning component scanning in the Nuxt Icon module.

```typescript
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', /* ... */],
      },
    },
  },
})
```

--------------------------------

### scanFiles Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Example of scanning all matching files in a Nuxt project to detect icon usage.

```typescript
const icons = await scanner.scanFiles(nuxt)
// Returns Set of all detected icons: { 'uil:github', 'mdi:home', ... }
```

--------------------------------

### Generated CSS Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of generated CSS for a specific icon, including CSS variables.

```css
:where(.i-uil-github) {
  --svg: url('data:image/svg+xml;utf8,...');
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--svg) no-repeat center / contain;
}
```

--------------------------------

### Icon Component Props

Source: https://github.com/nuxt/icon/blob/main/_autodocs/INDEX.md

Example of using the Icon component with various props.

```vue
<Icon 
  name="prefix:icon"           <!-- required -->
  mode="css"                   <!-- optional: 'css' or 'svg' -->
  size="24px"                  <!-- optional: CSS size -->
  :customize="customizeFn"     <!-- optional: SVG modifier -->
/>
```

--------------------------------

### Response Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Example of a JSON response containing icon data.

```json
{
  "prefix": "uil",
  "icons": {
    "github": {
      "body": "<g fill=\"currentColor\"><path d=\"...\"/></g>",
      "width": 24,
      "height": 24
    },
    "home": {
      "body": "<g fill=\"currentColor\"><path d=\"...\"/></g>",
      "width": 24,
      "height": 24
    }
  }
}
```

--------------------------------

### Module Configuration with Options

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Configuring the Nuxt Icon module with specific options in nuxt.config.ts.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    // Configuration options
    componentName: 'Icon',
    serverBundle: 'auto',
    clientBundle: {
      scan: true,
      icons: ['uil:github']
    }
  }
})
```

--------------------------------

### Custom Icon Styling Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of customizing icon SVG content using the 'customize' prop.

```vue
<template>
  <Icon 
    name="uil:github" 
    :customize="(content) => content.replace(/stroke-width=\"[^\"]*\"/, 'stroke-width=\"2\"')"
  />
</template>
```

--------------------------------

### Dynamic Icon Component Usage

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Examples of using the DynamicIcon component with different props.

```vue
<template>
  <DynamicIcon name="uil:github" size="32px" color="blue" />
  <DynamicIcon name="eos-icons:loading" size="24px" animated />
</template>
```

--------------------------------

### Icon with Fallback Component Usage

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Example of using the IconWithFallback component.

```vue
<template>
  <IconWithFallback icon="uil:github" fallback="GitHub" />
</template>
```

--------------------------------

### CSS Variables for Styling

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of how to style icons using CSS variables.

```css
.my-icon {
  /* Customize icon appearance */
  color: blue;
  font-size: 24px;
}
```

--------------------------------

### Rendering in Render Functions Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/icon-component.md

Example of rendering the Icon component within Vue render functions.

```typescript
import { Icon } from '#components'
import { defineComponent, h } from 'vue'

export default defineComponent({
  setup() {
    return () => h(Icon, { name: 'uil:github' })
  }
})
```

--------------------------------

### In Component Usage Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Example of using `useResolvedName` within a Vue component's script setup.

```vue
<script setup lang="ts">
import { useResolvedName } from '@nuxt/icon/runtime'

const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

const resolvedName = useResolvedName(() => props.name)
</script>

<template>
  <div>{{ resolvedName }}</div>
</template>
```

--------------------------------

### Export Structure

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Exporting key types for type-safe configuration of the module.

```typescript
export type { ModuleOptions, NuxtIconRuntimeOptions as RuntimeOptions }

export default defineNuxtModule<ModuleOptions>({
  // ...
})
```

--------------------------------

### Rendering Output Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Example of the rendered SVG element output by the Icon component in SVG mode.

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="..." style="...">
  <g fill="currentColor">
    <path d="..."/>
  </g>
</svg>
```

--------------------------------

### Plugin Registration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Code snippet showing the registration of the runtime plugin for icon providers.

```typescript
addPlugin('./runtime/plugin')
```

--------------------------------

### Basic Scanning

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Basic example of initializing IconUsageScanner and scanning files.

```typescript
import { IconUsageScanner } from '@nuxt/icon'

const scanner = new IconUsageScanner(true)
const icons = await scanner.scanFiles(nuxt)
console.log('Found icons:', icons)
```

--------------------------------

### Development Mode CSS Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

An example of how the icon component inserts a `data-nuxt-icon-dev` attribute on style tags for debugging in development mode.

```html
<style data-nuxt-icon-dev="uil:github">
  :where(.i-uil-github) {
    /* uncompressed CSS */
  }
</style>
```

--------------------------------

### Server Handler Registration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Registering the icon API endpoint as a server handler.

```typescript
addServerHandler({
  route: `${options.localApiEndpoint || '/api/_nuxt_icon'}/:collection`,
  handler: './runtime/server/api'
})
```

--------------------------------

### Devtools Integration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Integrating the module with Nuxt Devtools by adding a custom tab.

```typescript
addCustomTab({
  name: 'icones',
  title: 'Icônes',
  icon: 'https://icones.js.org/favicon.svg',
  view: {
    type: 'iframe',
    src: 'https://icones.js.org'
  }
})
```

--------------------------------

### Using Aliased Icon

Source: https://github.com/nuxt/icon/blob/main/README.md

Example of using a defined alias 'nuxt' to render the 'logos:nuxt-icon'.

```html
<Icon name="nuxt" />
```

--------------------------------

### Alias Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Configuring icon aliases and debugging them.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    aliases: {
      'github': 'uil:github'
    }
  }
})

<!-- This should work -->
<Icon name="github" />

// Check if alias is registered
import { useAppConfig } from '#app'

const config = useAppConfig().icon
console.log(config.aliases)  // Should show { github: 'uil:github' }
```

--------------------------------

### Icon Name Format

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Demonstrates the correct and incorrect format for icon names.

```vue
<Icon name="github" />

<Icon name="uil:github" />

<Icon name="github" />  <!-- If alias configured -->
```

--------------------------------

### Runtime Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Setting runtime configuration options for the Nuxt Icon module in app.config.ts.

```typescript
export default defineAppConfig({
  icon: {
    size: '24px',
    mode: 'css',
    aliases: {
      'github': 'uil:github'
    }
  }
})
```

--------------------------------

### Component Not Imported

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Example showing when a component does not need to be imported because it's globally registered, and when it might be needed in a render function.

```vue
<!-- Don't need to import -->
<template>
  <Icon name="uil:github" />
</template>

<!-- Import from #components if needed in render function -->
<script setup>
import { Icon } from '#components'
</script>
```

--------------------------------

### Client-Only Fallback

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Illustrates the data flow when fallbackToApi is set to 'client-only'.

```text
Client → Server Endpoint (no fallback) OR
Client → Iconify API (if server returns empty)
```

--------------------------------

### Enable Verbose Logging

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Enable server logging in nuxt.config.ts to get debug information in browser console and server logs.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  nitro: {
    logging: true  // Enable server logging
  }
})
```

--------------------------------

### Check Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Log the icon module's configuration, including collections, provider, and aliases.

```typescript
import { useAppConfig } from '#app'

const config = useAppConfig().icon
console.log('Icon config:', config)
console.log('Collections:', config.collections)
console.log('Provider:', config.provider)
console.log('Aliases:', config.aliases)
```

--------------------------------

### Pre-fetch Icons for SSR

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Vue script setup using `onServerPrefetch` to load an icon before the component is rendered on the server, preventing FOUC.

```vue
<script setup>
import { onServerPrefetch } from 'nuxt'
import { loadIcon } from '@nuxt/icon'

onServerPrefetch(async () => {
  await loadIcon('uil:github', 1500)
})
</script>

<template>
  <Icon name="uil:github" />
</template>
```

--------------------------------

### HTTP Endpoints - Icon Collection Endpoint

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Example of an HTTP GET request to retrieve icons from a collection, along with the expected JSON response structure.

```http
GET /api/_nuxt_icon/:collection?icons=icon1,icon2
```

```json
{
  "prefix": "uil",
  "icons": {
    "github": {
      "body": "<path d=\"...\"/>",
      "width": 24,
      "height": 24
    }
  }
}
```

--------------------------------

### Client Bundle Available Options Configuration

Source: https://github.com/nuxt/icon/blob/main/README.md

Demonstrates various options for the client bundle, including explicitly listing icons, enabling static scanning, including custom collections, and setting a size limit for the bundle.

```typescript
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,
    },
  },
})
```

--------------------------------

### Component Registration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Code snippet showing how the Icon component is registered globally by the module.

```typescript
addComponent({
  name: options.componentName || 'Icon',
  global: true,
  filePath: './runtime/components/index'
})
```

--------------------------------

### Pre-bundle icons for client bundle

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Ensures the client bundle is initialized and includes specified icons.

```typescript
// Ensure client bundle is available
export default defineNuxtConfig({
  icon: {
    clientBundle: {
      icons: ['uil:github']  // Pre-bundle icon
    }
  }
})
```

--------------------------------

### Basic Loading Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Loads an icon with a specified timeout and logs its body if found.

```typescript
import { loadIcon } from '@nuxt/icon'

// In a composable or async component
const icon = await loadIcon('uil:github', 1500)
if (icon) {
  console.log('Icon body:', icon.body)
}
```

--------------------------------

### Using Custom Local Icons in Vue

Source: https://github.com/nuxt/icon/blob/main/README.md

Example of how to use the custom local icons within a Vue template.

```vue
<template>
  <Icon name="my-icon:foo" />
  <Icon name="my-icon:bar-outline" />
</template>
```

--------------------------------

### Pre-fetch Critical Icons

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Example of pre-fetching critical icons on the server using `onServerPrefetch` and `loadIcon` for immediate availability on the client.

```vue
<script setup lang="ts">
import { onServerPrefetch } from 'nuxt'
import { loadIcon } from '@nuxt/icon'

// Pre-fetch logos on server for immediate availability
onServerPrefetch(async () => {
  await Promise.all([
    loadIcon('brand:logo', 1500),
    loadIcon('uil:github', 1000)
  ])
})
</script>

<template>
  <div>
    <Icon name="brand:logo" />
    <Icon name="uil:github" />
  </div>
</template>
```

--------------------------------

### Vite Configuration for Deduplication

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/module-setup.md

Modifying Vite configuration to prevent duplicate bundling of '@iconify/vue'.

```typescript
nuxt.options.vite.resolve.dedupe = [
  ...(nuxt.options.vite.resolve.dedupe || []),
  '@iconify/vue'  // Prevent duplicate bundling
]
```

--------------------------------

### Dynamic Bundle for Multiple Configurations

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Use environment variables to dynamically configure the client bundle based on the environment (development, test, production).

```typescript
// nuxt.config.ts
const isDev = process.env.NODE_ENV === 'development'
const isTest = process.env.NODE_ENV === 'test'

export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    clientBundle: isDev || isTest
      ? {
          scan: true,
          icons: []
        }
      : {
          icons: [
            'uil:github',
            'mdi:home',
            'heroicons:star'
          ],
          sizeLimitKb: 128
        }
  }
})
```

--------------------------------

### Local Mode Collections

Source: https://github.com/nuxt/icon/blob/main/_autodocs/endpoints.md

Example of how collections are bundled as dynamic imports in local mode.

```typescript
// Generated code in server bundle
const collections = {
  'uil': () => import('@iconify-json/uil/icons.json'),
  'mdi': () => import('@iconify-json/mdi/icons.json')
}

Collections are loaded on-demand when first requested.
```

--------------------------------

### Server-Only Fallback

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Illustrates the data flow when fallbackToApi is set to 'server-only'.

```text
Client → Server Endpoint → Iconify API
```

--------------------------------

### Configuring Custom Local Collections

Source: https://github.com/nuxt/icon/blob/main/README.md

Example of how to configure custom local collections in nuxt.config.ts, pointing to a directory of SVG files.

```typescript
import { createResolver } from "nuxt/kit"

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ],
  icon: {
    customCollections: [
      {
        prefix: 'my-icon',
        dir: resolve('./assets/my-icons'),
        // if you want to include all the icons in nested directories:
        // recursive: true,
      },
    ],
  },
})
```

--------------------------------

### Configuration Examples - SPA with Pre-bundled Icons

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Configuration for SPAs to pre-bundle specified icons, eliminating network requests for those icons.

```typescript
export default defineNuxtConfig({
  ssr: false,
  modules: ['@nuxt/icon'],
  icon: {
    clientBundle: {
      icons: ['uil:github', 'mdi:home'],
      sizeLimitKb: 128
    }
  }
})
```

--------------------------------

### SSR Server Payload Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of how icon data is stored in the Nuxt payload during SSR.

```typescript
// Server generates and stores
nuxt.payload.data['uil-github'] = {
  body: '<path d="..."/>',
  width: 24,
  height: 24
}
```

--------------------------------

### Fetch Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

The plugin sets the fetch implementation to use Nuxt's `$fetch.native` for making HTTP requests.

```typescript
_api.setFetch($fetch.native)
```

--------------------------------

### Basic Aliases

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Create shortcuts for frequently used icons in `app.config.ts`.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    aliases: {
      'menu': 'uil:bars',
      'close': 'uil:times',
      'search': 'uil:search',
      'back': 'uil:arrow-left',
      'forward': 'uil:arrow-right',
      'github': 'uil:github-alt',
      'twitter': 'uil:twitter-alt',
      'settings': 'uil:setting'
    }
  }
})
```

```vue
<template>
  <Icon name="menu" />      <!-- uil:bars -->
  <Icon name="close" />     <!-- uil:times -->
  <Icon name="github" />    <!-- uil:github-alt -->
</template>
```

--------------------------------

### Client Bundle Prefetch Icons Configuration

Source: https://github.com/nuxt/icon/blob/main/README.md

Example configuration to pre-bundle specific icons with the client bundle for faster availability on first render. 'scan: false' means only explicitly listed icons are bundled.

```typescript
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,
    },
  },
})
```

--------------------------------

### Configuration Examples - SSR with Local Icons

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Configuration for SSR applications to bundle icon data locally, serving icons from a local server endpoint.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    serverBundle: 'local'  // Bundle @iconify-json/* packages
  }
})
```

--------------------------------

### extractFromCode Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Example of using extractFromCode to find icon names within a code string.

```typescript
const icons = new Set<string>()
scanner.extractFromCode('<Icon name="uil:github" />', icons)
// icons = { 'uil:github' }
```

--------------------------------

### None Provider (Client Bundle Only)

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Configuration for the 'none' provider, which prevents network requests and relies solely on the client bundle.

```typescript
if (options.provider === 'none') {
  _api.setFetch(() => Promise.resolve(new Response()))
}
```

--------------------------------

### Custom Accessibility Attributes Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of overriding default accessibility attributes for semantic icons using Vue.

```vue
<template>
  <Icon name="uil:github" role="img" aria-label="GitHub" />
</template>

Renders:

<span 
  class="iconify i-uil-github" 
  role="img" 
  aria-label="GitHub"
  aria-hidden="false"
></span>
```

--------------------------------

### Iconify Dataset Example

Source: https://github.com/nuxt/icon/blob/main/README.md

Use an icon from the Iconify collection by its name.

```html
<Icon name="uil:github" />
```

--------------------------------

### Offline-First Strategy

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Bundle critical icons for offline availability and use a server provider with fallback for other icons.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    provider: 'server',
    clientBundle: {
      // Critical icons always available
      icons: [
        'uil:menu',
        'uil:close',
        'uil:home',
        'uil:settings'
      ],
      sizeLimitKb: 0  // No size limit for critical icons
    },
    serverBundle: 'local'  // Use bundled collections
  }
})
```

--------------------------------

### Fallback to API Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Server provider can fall back to Iconify API based on the `fallbackToApi` option.

```typescript
if (options.fallbackToApi === true || options.fallbackToApi === 'client-only') {
  resources.push(options.iconifyApiEndpoint!)
}
```

--------------------------------

### Server Provider (Default for SSR)

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Configuration for the server provider, which uses a local endpoint first and can fall back to the Iconify API.

```typescript
if (options.provider === 'server') {
  resources = [
    '/api/_nuxt_icon',           // Local endpoint first
    'https://api.iconify.design' // Fallback (if enabled)
  ]
  addAPIProvider('', { resources })
}
```

--------------------------------

### No Timeout Example

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Loads an icon without any timeout.

```typescript
const icon = await loadIcon('mdi:home', -1)
```

--------------------------------

### Configuration Examples - Custom Collections Only

Source: https://github.com/nuxt/icon/blob/main/_autodocs/README.md

Configuration to use only custom SVG collections, disabling the Iconify API and serving icons from a local directory.

```typescript
import { createResolver } from 'nuxt/kit'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    provider: 'none',  // No Iconify API
    customCollections: [
      {
        prefix: 'app',
        dir: resolve('./assets/icons'),
        recursive: true
      }
    ]
  }
})
```

--------------------------------

### Increase Fetch Timeout

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

How to increase the fetch timeout for icons.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    fetchTimeout: 3000  // Increase timeout (default: 1500ms)
  }
})
```

--------------------------------

### Test Environment Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Configuration for Vitest and Nuxt to set up the test environment, including enabling globals and configuring the icon provider for tests.

```typescript
// vitest.config.ts or nuxt.config.ts
export default defineConfig({
  // ...
  test: {
    globals: true
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],

  icon: process.env.NODE_ENV === 'test'
    ? {
        provider: 'none',
        clientBundle: {
          scan: true,
          icons: ['test:icon']
        }
      }
    : {}
})
```

--------------------------------

### With Aliases Example (Usage)

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Usage of `useResolvedName` with configured aliases.

```typescript
const name = useResolvedName(() => 'github')
// Resolves to: 'uil:github'
```

--------------------------------

### Client Bundle Initialization

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Code snippet for initializing the client bundle and registering pre-bundled icons.

```typescript
import { initClientBundle } from '#build/nuxt-icon-client-bundle'

initClientBundle(_addIcon)  // Registers pre-bundled icons
```

--------------------------------

### Documentation Structure

Source: https://github.com/nuxt/icon/blob/main/_autodocs/INDEX.md

Directory structure of the Nuxt Icon documentation.

```text
/output/
├── README.md                          # Main overview
├── INDEX.md                           # This file
├── configuration.md                   # Configuration reference
├── types.md                           # Type definitions
├── endpoints.md                       # HTTP API endpoints
├── advanced-usage.md                  # Advanced patterns
├── troubleshooting.md                 # Common issues
└── api-reference/
    ├── icon-component.md              # Icon component API
    ├── css-mode.md                    # CSS mode details
    ├── svg-mode.md                    # SVG mode details
    ├── utilities.md                   # Helper functions
    ├── module-setup.md                # Module initialization
    └── runtime-plugin.md              # Runtime plugin

```

--------------------------------

### Specify Explicit Collections for Build Performance

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Nuxt configuration to optimize build times by specifying only the necessary icon collections for the server bundle.

```typescript
export default defineNuxtConfig({
  icon: {
    serverBundle: {
      collections: ['uil', 'mdi', 'heroicons']  // Only needed collections
    }
  }
})
```

--------------------------------

### Icon Button Component Usage

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Example of how to use the IconButton component in a Vue template.

```vue
<template>
  <IconButton icon="uil:github" label="GitHub" />
  <IconButton icon="uil:menu" label="Menu" />
  <IconButton icon="uil:close" label="Close" :disabled="true" />
</template>
```

--------------------------------

### Icon Customization Function

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Example of a customize function to modify SVG content.

```typescript
const customize = (content: string, name?: string, prefix?: string) => {
  return content
    .replace(/stroke-width="[^"]*"/g, 'stroke-width="2"')
    .replace(/fill="[^"]*"/g, 'fill="currentColor"')
}

```

--------------------------------

### Client Bundle Configuration - Custom Scan Options

Source: https://github.com/nuxt/icon/blob/main/_autodocs/configuration.md

Configure options for static scanning.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    clientBundle: {
      scan: {
        globInclude: ['components/**/*.vue', 'pages/**/*.vue'],
        globExclude: ['node_modules', 'dist'],
        ignoreCollections: ['dev-icons'], // Don't scan for 'dev-icons:*'
        additionalCollections: ['my-custom-icons']
      }
    }
  }
})
```

--------------------------------

### IconUsageScanner Constructor

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/utilities.md

Example of instantiating IconUsageScanner with custom scan options.

```typescript
const scanner = new IconUsageScanner({
  globInclude: ['components/**/*.vue'],
  globExclude: ['node_modules'],
  ignoreCollections: ['dev-icons'],
  additionalCollections: ['my-icons']
})
```

--------------------------------

### CSS Mode Rendering Output

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of the HTML structure for a CSS-mode icon.

```html
<span class="iconify i-{prefix}-{icon}"></span>
```

--------------------------------

### Iconify Provider (Default for SPA)

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Configuration for the Iconify provider, which sends requests directly to the Iconify API.

```typescript
if (options.provider === 'iconify') {
  resources = ['https://api.iconify.design']
  addAPIProvider('', { resources })
}
```

--------------------------------

### Inspect Icon Data

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Load an icon and log its data structure to inspect it.

```typescript
import { loadIcon } from '@nuxt/icon'

const icon = await loadIcon('uil:github', 1500)
console.log(icon)  // Check loaded data structure
```

--------------------------------

### Verify directory structure

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Checks if the SVG files exist in the specified directory.

```bash
# Verify directory structure
ls -la assets/icons/
# Should show: github.svg, home.svg, etc.
```

--------------------------------

### Verify endpoint path

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Ensures the server endpoint path is correctly configured.

```typescript
// Verify endpoint path
export default defineNuxtConfig({
  icon: {
    localApiEndpoint: '/api/_nuxt_icon'  // Default
  }
})
```

--------------------------------

### Provider Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/troubleshooting.md

Options to add icons to the client bundle or change the provider.

```typescript
// Option 1: Add icon to client bundle
export default defineNuxtConfig({
  icon: {
    clientBundle: {
      icons: ['uil:github']
    }
  }
})

// Option 2: Change provider
export default defineNuxtConfig({
  icon: {
    provider: 'server'  // or 'iconify'
  }
})
```

--------------------------------

### Timeout Configuration

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/runtime-plugin.md

Configuring the icon loading timeout in app.config.ts.

```typescript
// app.config.ts
export default defineAppConfig({
  icon: {
    fetchTimeout: 1500  // milliseconds
  }
})
```

--------------------------------

### Icon Animations

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Example of using an animated icon, such as a loading spinner, with the Icon component.

```vue
<template>
  <!-- Animated icon (if supported by collection) -->
  <Icon name="eos-icons:loading" />
</template>
```

--------------------------------

### Monitor Bundle Size

Source: https://github.com/nuxt/icon/blob/main/_autodocs/advanced-usage.md

Track icon bundle size changes using a build script.

```typescript
// Build script
import fs from 'fs'
import path from 'path'

const bundlePath = path.join('.nuxt', 'dist', 'nuxt-icon-client-bundle.mjs')
const bundleSize = fs.statSync(bundlePath).size

console.log(`Icon client bundle: ${(bundleSize / 1024).toFixed(2)} KB`)

// Store in CI for trend analysis
process.env.ICON_BUNDLE_SIZE = String(bundleSize)
```

--------------------------------

### Icon Loading with Timeout

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/svg-mode.md

Example of loading an icon with a specified timeout and error handling.

```typescript
const icon = await loadIcon(name, timeout)
  .catch(() => {
    console.warn(`[Icon] failed to load icon \
`${name}\
``)
    return null
  })
```

--------------------------------

### Generated CSS with @layer

Source: https://github.com/nuxt/icon/blob/main/_autodocs/api-reference/css-mode.md

Example of generated CSS when using CSS layer support.

```css
@layer components {
  :where(.i-uil-github) {
    /* styles */
  }
}
```