### Module Setup Phase Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Demonstrates the core logic within the `setup` function of the nuxt-svgo module, including path resolution, component registration, and Vite plugin addition.

```typescript
async setup(options: ModuleOptions, nuxt: Nuxt) {
  // 1. Create path resolver
  const { resolvePath, resolve } = createResolver(import.meta.url)
  
  // 2. Register NuxtIcon component
  addComponent({
    name: 'nuxt-icon',
    filePath: resolve('./runtime/components/nuxt-icon.vue'),
  })
  
  // 3. Add Vite plugin
  addVitePlugin(svgLoader({...options}))
  
  // 4. Auto-import SVG components (if enabled)
  if (options.autoImportPath) {
    // Resolve paths in app and layers
    // Register component directories
  }
  
  // 5. Generate TypeScript declarations (if enabled)
  if (options.dts && isViteBuild()) {
    addTemplate(...)
    nuxt.hook('prepare:types', ...)
  }
  
  // 6. Configure Webpack (Nuxt 3 only)
  extendWebpackConfig(...)
}
```

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

### Basic Nuxt Module Setup

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Minimal configuration to get started with Nuxt-SVGO. Icons are auto-imported from the default directory.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
})
```

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

### Nuxt Configuration Setup

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Basic setup for the nuxt-svgo module in `nuxt.config.ts`. This involves adding 'nuxt-svgo' to the modules array and defining the `svgo` configuration object.

```typescript
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    // Configuration options here
  },
})
```

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

### Example Hash Code Calculations

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

Illustrative examples of the 'hashCode' utility function, showing how different file paths produce distinct hash codes, while the same path yields the same hash.

```javascript
hashCode('assets/icons/home.svg')      // → some 32-bit integer
hashCode('assets/icons/admin/badge.svg') // → different integer
hashCode('assets/icons/home.svg')      // → same as first
```

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

### Module Setup with Options

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Set up the nuxt-svgo module with custom options for component prefix, TypeScript declarations, and SVGO optimization.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    componentPrefix: 'icon',
    dts: true,
    svgo: true,
  },
})
```

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

### Install and Configure nuxt-svgo

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/README.md

Install the nuxt-svgo package using npm and add it to your nuxt.config.ts file. This snippet also shows how to create an icon directory and use an SVG file in your template.

```bash
# 1. Install nuxt-svgo
npm install nuxt-svgo

# 2. Add to nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
})

# 3. Create icon directory
mkdir -p assets/icons

# 4. Add SVG file
# assets/icons/home.svg

# 5. Use in template
# <SvgoHome />
```

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

### SVGO Preset Default Plugin Override Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Demonstrates how to override default plugin options or disable plugins within the `preset-default` configuration for SVGO. This example shows customizing `inlineStyles` and disabling `removeDoctype`.

```typescript
plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              // customize default plugin options
              inlineStyles: {
                onlyMatchedOnce: false,
              },

              // or disable plugins
              removeDoctype: false,
            },
          },
        },
      ]
```

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

### Example Generated TypeScript Declarations

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/api-reference/import-types-generator.md

This example shows the generated TypeScript declarations for a specific nuxt-svgo configuration, including default import handling and query declarations.

```typescript
// Generated by nuxt-svgo module

type ComponentProps<T> = T extends new (...args: any) => { $props: infer P; } ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : {};

// Default - loads optimized svg with <NuxtIcon/> component
declare module '*.svg' {
  import { DefineComponent } from 'vue';
  import { NuxtIcon } from '#components';

  type OmitIcon<T> = DefineComponent<Omit<ComponentProps<T>, 'icon'>>;

  const component: OmitIcon<typeof NuxtIcon>;
  export default component;
}

// loads optimized svg as data uri (uses svgo + `mini-svg-data-uri`)
declare module '*.svg?url_encode' {
  const dataUri: string;
  export default dataUri;
}

// ... additional query declarations ...
```

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

### Minimal SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

An example of a minimal SVGO configuration object. This configuration disables all SVGO optimizations.

```typescript
svgoConfig: {}
```

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

### Install nuxt-svgo Module

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Use this command to add the nuxt-svgo module to your Nuxt project.

```sh
npx nuxi@latest module add nuxt-svgo
```

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

### Configuration Resolution Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Demonstrates how user-provided configuration is merged with default settings, including SVGO configuration, to create the final effective configuration for the module.

```typescript
// User provides partial config
const userConfig = { componentPrefix: 'i' }

// Defaults are applied
const finalConfig = {
  ...defaults,
  ...userConfig,
  svgoConfig: userConfig.svgoConfig || defaultSvgoConfig,
}
```

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

### nuxt.config.ts Usage Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

Demonstrates how to configure the nuxt-svgo module in your Nuxt application's configuration file.

```typescript
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    // ModuleOptions
    componentPrefix: 'i',
    dts: true,
    global: false,
    
    // SvgLoaderOptions (from parent type)
    autoImportPath: ['./assets/icons/', './assets/symbols/'],
    customComponent: 'MyIcon',
    defaultImport: 'component',
    svgo: true,
    svgoConfig: {
      plugins: ['preset-default'],
    },
  },
})
```

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

### Using Custom Component Prefix

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Example of using a custom component prefix ('i') in your Vue template.

```jsx
// in your template
<template>
  <div>
    <i-home />
  </div>
</template>
```

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

### Type-Safe Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

This example demonstrates how to configure the nuxt-svgo module with type safety by importing and using the `ModuleOptions` type.

```typescript
import { defineNuxtConfig } from 'nuxt'
import type { ModuleOptions } from 'nuxt-svgo'

const svgoConfig: ModuleOptions = {
  componentPrefix: 'icon',
  dts: true,
}

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: svgoConfig,
})
```

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

### Component Naming Convention Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Illustrates how SVG file paths are transformed into PascalCase component names, including directory structure and a configurable prefix. This helps prevent naming collisions.

```text
Component Name = Prefix + FileName (PascalCase) + Directories (kebab)

Example: componentPrefix = 'svgo'
  assets/icons/home.svg           → SvgoHome
  assets/icons/admin/badge.svg    → SvgoAdminBadge
```

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

### Minimal nuxt-svgo Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/README.md

Configure nuxt-svgo with minimal settings in nuxt.config.ts. This setup requires no additional configuration as it works out of the box.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  // Zero config needed — works out of the box!
})
```

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

### Configure Auto-Import Path Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Shows how to specify a custom directory for auto-importing SVG icons using the `autoImportPath` configuration option.

```typescript
svgo: { autoImportPath: './assets/my-icons/' }
```

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

### Customizing SVGO for Specific Needs (Keep Metadata)

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

Example configuration to preserve all SVG metadata by only including the 'preset-default' plugin.

```typescript
svgo: {
  svgo: true,
  svgoConfig: {
    plugins: ['preset-default'],  // Just the preset, keep metadata
  },
}
```

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

### Default Configuration for nuxt-svgo

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Add 'nuxt-svgo' to the modules array in your nuxt.config.ts for default setup.

```typescript
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
})
```

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

### Import SVG as Component Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Demonstrates how to import an SVG file directly as a Vue component. This is typically handled by the module's auto-import system.

```typescript
import IconHome from '~/assets/icons/home.svg'
```

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

### Advanced Direct Plugin Usage

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

This example shows how to use the `svgLoader` plugin directly in a Vite configuration. This is an advanced usage scenario and not recommended unless building outside of Nuxt.

```typescript
// vite.config.ts (not recommended unless building outside Nuxt)
import { defineConfig } from 'vite'
import { svgLoader } from 'nuxt-svgo'

export default defineConfig({
  plugins: [
    svgLoader({
      autoImportPath: './icons/',
      customComponent: 'IconWrapper',
      svgo: true,
    }),
  ],
})
```

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

### Using Auto-Imported Icons in Vue Template

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Demonstrates how to use icons that are automatically imported by nuxt-svgo. No script setup is needed as icons are globally available.

```vue
<template>
  <div class="header">
    <!-- Icon from assets/icons/home.svg -->
    <SvgoHome class="text-xl" />
    
    <!-- Icon from assets/icons/admin/settings.svg -->
    <SvgoAdminSettings class="text-lg" />
  </div>
</template>

<!-- No script setup needed - icons are auto-imported! -->
```

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

### SVGO Configuration with Custom Plugin Settings

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

An example of an SVGO configuration that enables multipass optimization and customizes the 'preset-default' plugin with specific overrides, also including the 'removeViewBox' plugin.

```typescript
svgoConfig: {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: { onlyMatchedOnce: false },
          removeDoctype: false,
        },
      },
    },
    'removeViewBox',
  ],
}
```

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

### Explicit Sizing Example

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

Shows how to set explicit dimensions for an icon when fontControlled is false. Uses CSS classes for width and height.

```vue
<template>
  <!-- Icon will be 24px × 24px -->
  <SvgoHome :fontControlled="false" class="w-6 h-6" />
</template>

<style>
.w-6 {
  width: 1.5rem; /* 24px */
}
.h-6 {
  height: 1.5rem; /* 24px */
}
</style>
```

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

### Short Component Prefix Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Use an ultra-short prefix for icon components to reduce verbosity in templates. This example sets the prefix to 'i'.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    componentPrefix: 'i',  // Ultra-short prefix
  },
})
```

```vue
<template>
  <!-- Very concise -->
  <IHome />
  <ISettings />
  <ISearch />
</template>
```

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

### Custom Component Prefix Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Change the default 'svgo-' prefix for generated icon components. This example sets the prefix to 'icon'.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    componentPrefix: 'icon',  // Changed from 'svgo'
  },
})
```

```vue
<template>
  <!-- Now using 'icon-' prefix -->
  <IconHome />
  <IconAdminSettings />
  <IconSearch />
</template>
```

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

### Style Icons with Tailwind CSS Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Demonstrates applying Tailwind CSS classes to an auto-imported SVG component for styling, such as setting size and color.

```vue
<SvgoHome class="w-5 h-5 text-blue-600" />
```

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

### Font-Controlled Sizing Example

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

Demonstrates how icons scale with the current font size when fontControlled is true. The icon will match the parent's font size.

```vue
<template>
  <!-- Icon will be 20px × 20px, the size of the text -->
  <span class="text-xl">
    <SvgoHome />
  </span>
</template>

<style>
.text-xl {
  font-size: 1.25rem; /* 20px */
}
</style>
```

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

### Component Hierarchy

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Details the internal component setup of the nuxt-svgo module, including the registration of the NuxtIcon component, Vite SVG loader plugin, and icon auto-import configuration.

```text
nuxt-svgo Module Setup
├── Registers NuxtIcon Component
│   └── src/runtime/components/nuxt-icon.vue
├── Adds Vite SVG Loader Plugin
│   └── Intercepts *.svg imports
├── Configures Icon Auto-Import
│   ├── Scans autoImportPath directories
│   ├── Discovers SVG files recursively
│   └── Registers as Vue components
└── Generates TypeScript Declarations (if dts: true)
    └── Creates types/nuxt-svgo.d.ts
```

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

### Color Control Example

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

Illustrates color control for icons. The first icon inherits text color, while the second uses its original SVG colors.

```vue
<template>
  <div>
    <!-- Icon inherits text color -->
    <SvgoHome class="text-blue-500" />
    
    <!-- Icon uses original SVG colors -->
    <SvgoHome filled class="text-blue-500" />
  </div>
</template>
```

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

### SVGO Configuration to Remove Non-Essential Elements

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

An example SVGO configuration that applies the 'preset-default' plugin to remove non-essential elements from SVGs.

```typescript
svgoConfig: {
  plugins: ['preset-default'],
}
```

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

### Use TypeScript with SVGs Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Shows the configuration to enable TypeScript support for SVG imports, ensuring type safety. This is achieved by setting the `dts` option to `true`.

```typescript
svgo: { dts: true }
```

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

### TypeScript Declarations Setup

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Enables TypeScript declarations for full type safety with SVG imports. Requires setting `dts: true` in the module configuration.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: { dts: true },
})
```

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

### Future ESM-only Breaking Changes

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

This example illustrates the expected change in module import syntax for v5.x, highlighting the shift to ESM-only imports and the deprecation of CommonJS.

```javascript
// ❌ v5.x won't work
const nuxtSvgo = require('nuxt-svgo')

// ✅ v5.x required
import nuxtSvgo from 'nuxt-svgo'
```

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

### Hash-Based ID Prefixing Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Shows the TypeScript code snippet responsible for prefixing SVG element IDs with a hash of the file path to ensure uniqueness.

```typescript
prefix: (_, info) => 'i' + hashCode(info.path)
```

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

### Customizing SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

Example of how to override specific SVGO plugins while retaining others, such as disabling 'removeDoctype' and 'removeTitle' within the 'preset-default' plugin, and customizing the 'prefixIds' plugin.

```typescript
svgo: {
  svgo: true,
  svgoConfig: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            // Disable specific preset plugins
            removeDoctype: false,
            removeTitle: true,
          },
        },
      },
      'removeDimensions',  // Keep this
      {
        name: 'prefixIds',
        params: {
          prefix: (_, info) => 'custom-' + hashCode(info.path),
        },
      },
    ],
  },
}
```

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

### Migrating Nuxt Icon Component Usage

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Update your template syntax when migrating from `nuxt-icon` component to the new `svgo-` prefixed components. For example, `<nuxt-icon name="home" />` becomes `<svgo-home />`.

```html
<!-- from: -->
<nuxt-icon name="home" filled />
<nuxt-icon name="special/home" filled />
<!-- to: -->
<svgo-home filled />
<svgo-special-home filled />
```

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

### Import Queries for SVGs

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Import SVGs using various query parameters to control how they are processed, such as getting the asset URL, raw text, or a direct component.

```typescript
// Auto-imported (default: componentext)
import icon from '~/assets/icons/home.svg'

// Explicit queries:
import url from '~/assets/icons/home.svg?url'              // Asset URL
import dataUri from '~/assets/icons/home.svg?url_encode'   // Data URI
import text from '~/assets/icons/home.svg?raw'             // Raw text
import optimized from '~/assets/icons/home.svg?raw_optimized' // Optimized text
import component from '~/assets/icons/home.svg?component'  // Direct component
import wrapped from '~/assets/icons/home.svg?componentext' // Wrapped component
import unoptimized from '~/assets/icons/home.svg?skipsvgo' // No optimization
```

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

### File Structure Requirements

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Shows the recommended project structure for `nuxt-svgo`, highlighting the default `assets/icons/` directory for auto-importing SVG files.

```string
project/
├── assets/
│   └── icons/           ← Scanned by default
│       ├── home.svg
│       ├── settings.svg
│       └── admin/
│           ├── users.svg
│           └── roles.svg
├── nuxt.config.ts
└── app.vue
```

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

### Using Default SVGO Config

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

Configuration snippet showing how to enable SVGO without providing a custom 'svgoConfig', thus utilizing the module's default settings.

```typescript
svgo: {
  svgo: true,
  // No svgoConfig, uses defaults
}
```

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

### Configuration Options

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

A table summarizing the available configuration options for nuxt-svgo, including their types, default values, and use cases.

```APIDOC
## Configuration Quick Table

| Option | Type | Default | Use Case |
|---|---|---|---|
| `autoImportPath` | string/array | `'./assets/icons/'` | Where to scan for icons |
| `componentPrefix` | string | `'svgo'` | Component name prefix |
| `customComponent` | string | `'NuxtIcon'` | Wrapper for auto-imports |
| `defaultImport` | enum | `'componentext'` | Default import format |
| `dts` | boolean | `false` | TypeScript declarations |
| `explicitImportsOnly` | boolean | `false` | Strict query requirement |
| `global` | boolean | `true` | Global component registration |
| `svgo` | boolean | `false` | Enable optimization |
| `svgoConfig` | object | default | Custom SVGO config |
```

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

### Module Architecture Overview

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Illustrates the high-level structure of the nuxt-svgo module within the Nuxt build pipeline, highlighting its Vite plugin, component registration, and TypeScript support.

```text
Nuxt Application
    ↓
nust-svgo Module (src/module.ts)
    ├── Vite Plugin (src/loaders/vite.ts)
    │   └── SVG Processing Engine
    ├── Component Registration
    │   └── Auto-Discovery & Setup
    └── TypeScript Support (src/gen.ts)
        └── Declaration Generation
```

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

### Nuxt Module Definition

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

Defines the main Nuxt module export, including its metadata, default options, and setup function.

```typescript
const nuxtSvgo: NuxtModule<ModuleOptions> = defineNuxtModule({
  meta: {
    name: 'nuxt-svgo',
    configKey: 'svgo',
    compatibility: {
      nuxt: '^3.0.0 || ^4.0.0',
    },
  },
  defaults: ModuleOptions,
  async setup(options: ModuleOptions, nuxt: Nuxt): Promise<void>
})
```

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

### Change Component Prefix Example

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Illustrates how to change the prefix for auto-imported SVG components using the `componentPrefix` configuration option.

```typescript
svgo: { componentPrefix: 'icon' }
```

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

### Auto-Imported Icons Usage

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

SVGs placed in the `assets/icons/` directory are automatically registered as components. For example, `assets/icons/home.svg` becomes `<SvgoHome />`.

```vue
<template>
  <div>
    <SvgoHome class="text-xl" />
    <SvgoAdminSettings :fontControlled="false" class="w-6 h-6" />
  </div>
</template>
```

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

### File Structure Overview

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/README.md

This snippet shows the directory structure of the nuxt-svgo project. It outlines the purpose of each file and directory within the project.

```text
output/
├── README.md                          # This file
├── INDEX.md                           # Master index & navigation
├── quick-reference.md                 # Fast lookup guide
├── configuration.md                   # Complete config reference
├── types.md                           # Type definitions
├── architecture.md                    # Design & internals
├── utilities-and-exports.md           # Utilities & exports
├── usage-examples.md                  # Real-world examples
└── api-reference/
    ├── module.md                      # Nuxt module
    ├── svg-loader.md                  # Vite plugin
    ├── nuxt-icon-component.md         # Icon wrapper component
    └── import-types-generator.md      # Type declarations
```

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

### Configure Multiple Auto-Import Paths

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Provide an array of paths to auto-import icons from multiple directories.

```typescript
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: ['./assets/icons/', './assets/shapes/'],
  },
})
```

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

### Import Query Types

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/api-reference/svg-loader.md

Demonstrates how to use query parameters when importing SVGs to specify the desired output format.

```APIDOC
## Import Query Types

The plugin supports multiple import modes via query parameters. When importing an SVG, append a query parameter to specify the desired format:

### 1. URL (Default Vite Behavior)
```typescript
import iconUrl from './icon.svg?url'
// iconUrl is a string containing the asset URL
```
Returns the SVG as a static asset URL. Vite's default behavior; the plugin returns `undefined` to allow fallthrough.

### 2. URL Encode
```typescript
import iconDataUri from './icon.svg?url_encode'
// iconDataUri is a data URI string: "data:image/svg+xml,%3Csvg..."
```
Optimizes the SVG (if enabled) and encodes it as a data URI using `mini-svg-data-uri`. Useful for inline SVG backgrounds or `src` attributes.

**Requirements:** The SVG must include the `xmlns="http://www.w3.org/2000/svg"` attribute for the data URI to render correctly.

### 3. Raw
```typescript
import iconRaw from './icon.svg?raw'
// iconRaw is the unoptimized SVG as a string
```
Returns the SVG file contents as a plain string without optimization or Vue compilation.

### 4. Raw Optimized
```typescript
import iconOptimized from './icon.svg?raw_optimized'
// iconOptimized is the optimized SVG as a string
```
Returns the SVG file contents as a string after SVGO optimization (if enabled). Useful for server-side rendering or inline SVG rendering without Vue.

### 5. Component
```typescript
import IconHome from './icon.svg?component'
// IconHome is a Vue component
```
Compiles the SVG to a Vue component without wrapping. The SVG markup is the direct render output. Supports full Vue/HTML attributes and events.

### 6. Skip SVGO
```typescript
import IconHome from './icon.svg?skipsvgo'
// IconHome is an unoptimized Vue component
```
Compiles the unoptimized SVG to a Vue component, bypassing SVGO optimization regardless of configuration.

### 7. Component Extended (Default)
```typescript
import IconHome from './icon.svg?componentext'
// IconHome is a wrapped Vue component with icon prop support
```
The default for auto-imported SVGs. Compiles the SVG and wraps it with the custom component (e.g., `NuxtIcon`). This wrapper receives:

- `icon`: The compiled SVG component
- `name`: The SVG filename (without extension)

Allows for consistent styling, sizing, and behavior across all icons.
```

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

### Direct Import Usage

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

Demonstrates the typical usage pattern for auto-imported SVGs using the NuxtIcon wrapper implicitly.

```vue
<template>
  <div>
    <SvgoHome /> <!-- Automatically uses NuxtIcon wrapper -->
  </div>
</template>

<script setup lang="ts">
import SvgoHome from '~/assets/icons/home.svg'
</script>
```

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

### Conditional Icon Display

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

Example of conditionally displaying different icons based on a status variable. Uses 'filled' prop and color classes.

```vue
<template>
  <div>
    <nuxt-icon
      v-if="status === 'success'"
      :icon="SuccessIcon"
      filled
      class="text-green-500"
    />
    <nuxt-icon
      v-else-if="status === 'error'"
      :icon="ErrorIcon"
      filled
      class="text-red-500"
    />
  </div>
</template>

<script setup lang="ts">
import SuccessIcon from '~/assets/icons/check.svg?component'
import ErrorIcon from '~/assets/icons/cross.svg?component'

const status = ref('success')
</script>
```

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

### Disable SVGO Entirely for Webpack

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Completely disable SVGO optimization for your Nuxt 3 Webpack setup by setting `svgo: false` in the module configuration.

```typescript
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgo: false,
  },
})
```

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

### Module Configuration Options

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Lists the available configuration options for the nuxt-svgo module, including icon directory, default import type, component prefix, and SVGO settings.

```typescript
interface ModuleOptions {
  // Icon directory to scan
  autoImportPath?: string | string[] | false
  
  // Component wrapper for auto-imports
  customComponent?: string
  
  // Default import type
  defaultImport?: 'url' | 'url_encode' | 'raw' | 'raw_optimized' | 'component' | 'skipsvgo' | 'componentext'
  
  // Prefix for component names
  componentPrefix?: string
  
  // Generate TypeScript declarations
  dts?: boolean
  
  // Only process SVGs with explicit queries
  explicitImportsOnly?: boolean
  
  // Register components globally
  global?: boolean
  
  // Enable SVGO optimization
  svgo?: boolean
  
  // SVGO configuration object
  svgoConfig?: {
    multipass?: boolean
    plugins?: Array<string | { name: string; params?: object }>
  }
}
```

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

### Default Nuxt-SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Demonstrates using the nuxt-svgo module without any specific options, relying on its default settings.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  // No svgo config = use defaults
})
```

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

### Minimal SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Enables SVGO optimization with default settings.

```typescript
svgo: {}
```

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

### SVG Import Modes with Query Parameters

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Demonstrates how to use query parameters with SVG imports to specify different processing modes like 'component', 'raw', or 'url_encode'.

```javascript
import x from 'file.svg'           → Use defaultImport
import x from 'file.svg?component'  → Explicit type override
import x from 'file.svg?raw'        → Explicit type override
```

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

### Manual Icon Component Usage

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

Shows how to manually import an SVG with the 'component' query and wrap it with the NuxtIcon component.

```vue
<template>
  <div>
    <nuxt-icon :icon="IconHome" name="home" />
  </div>
</template>

<script setup lang="ts">
import IconHome from '~/assets/icons/home.svg?component'
</script>
```

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

### Nuxt-SVGO Default Settings Applied

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Lists the default configuration values applied by the nuxt-svgo module when no options are provided.

```json
{
  svgo: true,                    // Enable optimization
  defaultImport: 'componentext', // Use wrapped components
  autoImportPath: './assets/icons/',
  svgoConfig: undefined,         // Use built-in defaults
  global: true,                  // Global registration
  customComponent: 'NuxtIcon',   // Use NuxtIcon wrapper
  componentPrefix: 'svgo',       // 'svgo-' prefix
  dts: false,                    // No TypeScript declarations
}
```

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

### Nuxt-SVGO Configuration with Multiple Icon Directories

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Specifies multiple directories for auto-importing SVG icons in nuxt-svgo.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: [
      './assets/icons/ui/',
      './assets/icons/brands/',
    ],
  },
})
```

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

### Tailwind CSS Integration for Icons

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Integrates nuxt-svgo with Tailwind CSS for flexible sizing, coloring, and responsive design. This example shows various Tailwind utility applications.

```vue
<template>
  <div>
    <!-- Sized and colored -->
    <SvgoHome class="w-5 h-5 text-blue-600" />
    
    <!-- Responsive sizing -->
    <SvgoSearch class="w-4 h-4 md:w-6 md:h-6" />
    
    <!-- Interactive -->
    <button class="flex items-center gap-2 hover:text-blue-700">
      <SvgoSettings class="w-5 h-5" />
      Settings
    </button>
  </div>
</template>
```

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

### SVGO Configuration for Multiple Icon Directories

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Specifies multiple directories from which SVG icons should be scanned and auto-imported.

```typescript
svgo: {
  autoImportPath: [
    './assets/icons/',
    './assets/symbols/',
  ],
}
```

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

### Component Naming Convention

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Illustrates the naming convention for auto-imported SVG components based on their file path and the configured prefix. Shows both PascalCase and kebab-case HTML tag equivalents.

```string
File Path: assets/icons/admin/user-badge.svg
Prefix: svgo

Component Name: SvgoAdminUserBadge
HTML: <SvgoAdminUserBadge /> or <svgo-admin-user-badge />
```

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

### Conditional Icon Display

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Conditionally render different SVG icons based on a reactive status variable. This example uses `Svgo` prefixed components for different icon states.

```vue
<template>
  <div>
    <template v-if="status === 'success'">
      <SvgoCheckmark class="text-green-500" />
    </template>
    <template v-else-if="status === 'error'">
      <SvgoXmark class="text-red-500" />
    </template>
    <template v-else>
      <SvgoHourglass class="text-gray-500 animate-spin" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const status = ref<'success' | 'error' | 'pending'>('pending')
</script>
```

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

### SVGO Configuration for Aggressive Optimization

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Enables SVGO optimization with multipass enabled and the 'preset-default' plugin for more aggressive optimization.

```typescript
svgo: {
  svgo: true,
  svgoConfig: {
    multipass: true,
    plugins: ['preset-default'],
  },
}
```

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

### Font-Size Based Icon Scaling

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Icons automatically scale with the surrounding text's font size. This example shows how to use different text sizes to control icon size.

```vue
<template>
  <div>
    <!-- Small text, small icon -->
    <span class="text-sm">
      <SvgoSmall /> Small
    </span>
    
    <!-- Large text, large icon -->
    <span class="text-2xl">
      <SvgoLarge /> Large
    </span>
  </div>
</template>

<style scoped>
.text-sm {
  font-size: 0.875rem;  /* Icon becomes 0.875em × 0.875em */
}

.text-2xl {
  font-size: 1.5rem;    /* Icon becomes 1.5em × 1.5em */
}
</style>
```

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

### Direct Plugin Usage with Nuxt-SVGO

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

Demonstrates how to use the svgLoader plugin directly within Nuxt's configuration. This allows for advanced customization of SVG loading behavior, including auto-import paths, custom wrapper components, and detailed SVGO optimization settings.

```typescript
import { svgLoader } from 'nuxt-svgo'

export default {
  plugins: [
    svgLoader({
      autoImportPath: './icons/',
      customComponent: 'IconWrapper',
      defaultImport: 'componentext',
      svgo: true,
      svgoConfig: {
        multipass: true,
        plugins: [
          'preset-default',
          { name: 'removeViewBox', params: { removeDims: true } },
        ],
      },
    }),
  ],
}
```

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

### Bundle Size Optimization Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Aggressively optimizes SVGs for bundle size by enabling SVGO with multipass. Global auto-import is disabled.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgo: true,
    svgoConfig: { multipass: true },
    global: false,
  },
})
```

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

### Accessing Module Types

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

Demonstrates how to import module types for direct use or within Nuxt schema configurations.

```typescript
// Direct import (for tooling/IDE support)
import type { ModuleOptions, SvgLoaderOptions } from 'nuxt-svgo'

// Or from Nuxt schema (for module authors)
import type { ModuleOptions } from 'nuxt-svgo'
```

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

### Color Styling for Icons

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Icons inherit the current text color by default, allowing easy styling with text color utilities. This example shows applying different colors and hover effects.

```vue
<template>
  <div>
    <!-- Blue icon -->
    <SvgoHome class="text-blue-500" />
    
    <!-- Red icon with hover -->
    <SvgoDelete class="text-red-500 hover:text-red-700" />
    
    <!-- Green icon -->
    <SvgoCheckmark class="text-green-500" />
  </div>
</template>
```

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

### Configure Custom Auto-Import Path

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/README.md

Specify a custom directory for auto-importing icons by setting the 'autoImportPath' option in the svgo configuration.

```typescript
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: './assets/other-icons/',
  },
})
```

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

### Displaying and Styling Icons

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

Demonstrates how to use the Nuxt Icon component to render SVG icons with different sizes and colors. Ensure the SVG components are imported correctly.

```vue
<template>
  <div>
    <!-- Small icon (16px at default font) -->
    <span class="text-sm">
      <SvgoSmall />
    </span>
    
    <!-- Large icon with explicit size -->
    <SvgoLarge :fontControlled="false" class="w-10 h-10" />
    
    <!-- Colored icon -->
    <SvgoStar :filled="true" class="text-yellow-400" />
  </div>
</template>

<script setup lang="ts">
import SvgoSmall from '~/assets/icons/small.svg'
import SvgoLarge from '~/assets/icons/large.svg'
import SvgoStar from '~/assets/icons/star.svg'
</script>
```

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

### Default Module Configuration

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

Shows the default configuration options for the nuxt-svgo module, which can be overridden in the Nuxt configuration file.

```typescript
{
  svgo: true,                              // Enable SVGO optimization
  defaultImport: 'componentext',           // Default import type
  autoImportPath: './assets/icons/',       // Icon directory to scan
  svgoConfig: undefined,                   // Use built-in defaults
  global: true,                            // Register icons globally
  customComponent: 'NuxtIcon',            // Component wrapper for auto-imports
  componentPrefix: 'svgo',                 // Component name prefix
  dts: false,                              // Disable TypeScript declarations
}
```

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

### Enable SVGO Optimization

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Enable SVGO optimization for smaller bundle sizes by setting `svgo: true` and configuring optimization passes and plugins in `nuxt.config.ts`.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgo: true,  // Enable optimization
    svgoConfig: {
      multipass: true,  // Multiple optimization passes
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              removeComments: true,
              removeTitle: true,
            },
          },
        },
      ],
    },
  },
})
```

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

### SVGO Configuration with Custom Prefix

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Configures SVGO optimization and sets a custom prefix for auto-imported SVG components.

```typescript
svgo: {
  componentPrefix: 'icon',
}
```

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

### Apply Custom SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Allows for custom SVGO configuration by providing an object to `svgoConfig`. This enables fine-grained control over the optimization process, including enabling/disabling plugins and setting their parameters.

```typescript
svgo: {
  svgo: true,
  svgoConfig: {
    multipass: true,
    plugins: [
      'preset-default',
      'removeViewBox',
    ],
  },
}
```

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

### Runtime SVG Import Data Flow

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Explains the step-by-step process when a Vue component is imported at runtime, from Vite interception to browser loading.

```text
import icon from './icon.svg'
        ↓
Vite Bundler intercepts
        ↓
SVG Loader Plugin load() hook
        ↓
Check file matches SVG pattern
        ↓
Extract import query (if present)
        ↓
Read SVG from disk
        ↓
[Optional] SVGO Optimization
        ↓
Process based on import type:
├── 'raw' → export as string
├── 'url_encode' → encode as data URI
├── 'component' → compile to Vue component
└── 'componentext' → wrap with customComponent
        ↓
Return JavaScript code for Vite
        ↓
Bundler includes in output
        ↓
Browser loads component
```

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

### Migration: Named Imports

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Shows the simplified syntax for named imports from compiled modules in the new version compared to the old way.

```typescript
import * as icons from '~/assets/icons/home.svg'
const { default: IconHome } = icons
```

```typescript
import IconHome from '~/assets/icons/home.svg'
```

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

### Nuxt Module Source Structure

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Outlines the directory structure of the Nuxt-SVGO module's source code, showing the location of the main module definition, loaders, generator, and runtime components.

```text
src/
├── module.ts              # Main Nuxt module definition
├── loaders/
│   └── vite.ts           # Vite plugin for SVG processing
├── gen.ts                # TypeScript declaration generator
└── runtime/
    └── components/
        └── nuxt-icon.vue # Built-in icon wrapper component
```

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

### Enable Vite Debug Logging

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/INDEX.md

Run your development server with Vite debug logging enabled to troubleshoot build issues.

```bash
DEBUG=vite:* npm run dev
```

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

### Migration: Default Auto-Import Change (v4)

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Illustrates the change in default auto-import behavior from v2/v3 to v4. The new default is `componentext`, or explicit queries can be used.

```typescript
// defaultImport was 'simpleAutoImport'
svgo: {
  defaultImport: 'simpleAutoImport',
}
```

```typescript
// Use explicit query or change defaultImport
svgo: {
  defaultImport: 'componentext',  // Default
}

// Or explicit query:
import IconHome from '~/assets/icons/home.svg?component'
```

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

### Nuxt-SVGO Configuration for Aggressive Optimization

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/configuration.md

Enables aggressive SVG optimization using SVGO with specific plugin configurations, including multipass and overrides for viewBox, title, and description.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgo: true,
    svgoConfig: {
      multipass: true,
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              removeViewBox: false,
              removeTitle: true,
              removeDesc: true,
            },
          },
        },
      ],
    },
  },
})
```

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

### Raw SVG (Unoptimized) Import

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/usage-examples.md

Import an SVG file as raw, unoptimized text using the `?raw` query. Use this when you need the original SVG content without any modifications.

```vue
<template>
  <div>
    <div v-html="rawSvg" />
  </div>
</template>

<script setup lang="ts">
import rawSvg from '~/assets/icons/diagram.svg?raw'
</script>
```

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

### SVGO Configuration with TypeScript Support

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/quick-reference.md

Enables SVGO optimization and generates TypeScript declarations for SVG imports.

```typescript
svgo: {
  dts: true,
}
```

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

### Nuxt Module API

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the main Nuxt module export, including its definition, type, and configuration types.

```APIDOC
## Nuxt Module API

### Description
Provides the main entry point for the nuxt-svgo module, allowing for its integration into a Nuxt application. Includes type definitions for the module and its configuration.

### Module Export
- **defineNuxtModule** (function) - The primary function to export and configure the nuxt-svgo module within your Nuxt application.

### Types
- **Module Type Definition**: Defines the structure and expected types for the nuxt-svgo module.
- **Configuration Types**: Specifies the types for all available configuration options.
- **Re-exported Types**: Types made available for consumers of the module.
```

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

### NuxtIcon Component API

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the NuxtIcon component, covering its props, styling, and usage patterns.

```APIDOC
## NuxtIcon Component API

### Description
A wrapper component that simplifies the usage of SVGs within Nuxt applications, providing features like auto-import and styling.

### Props
- **(Various Props)**: Details on available props and their effects on component behavior and rendering.

### Styling
- **CSS Classes**: Information on how to apply CSS classes for styling.
- **Styling Patterns**: Guidance on different styling approaches, including font-based and explicit methods.

### Usage
- **Usage Patterns**: Examples and explanations of common ways to use the NuxtIcon component, including auto-imported icons and explicit imports with query parameters.
```

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

### Layer-Aware Auto-Import Logic

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Illustrates how the module scans for icon directories not only in the app root but also within all Nuxt layers for comprehensive icon discovery.

```typescript
// Check app root
nuxt.options.srcDir

// Check all layers
uxt.options._layers.forEach(layer => {
  if (layer.config && layer.config.srcDir) {
    // Include layer's icons
  }
})
```

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

### Using SVGs as Vue Components and Raw Strings

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/api-reference/svg-loader.md

Demonstrates how to import and use SVGs in Vue components. Supports auto-importing as components, explicit component imports, and raw SVG string usage for server-side rendering.

```vue
<!-- In a .vue file -->
<template>
  <div>
    <!-- Auto-imported with componentext (default) -->
    <SvgoHome />
    
    <!-- Explicit component import -->
    <component :is="iconComponent" />
    
    <!-- Raw SVG string (for server-side rendering) -->
    <div v-html="rawIcon" />
  </div>
</template>

<script setup lang="ts">
import SvgoHome from '~/assets/icons/home.svg'
import IconComponent from '~/assets/icons/user.svg?component'
import rawIcon from '~/assets/icons/star.svg?raw_optimized'
</script>
```

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

### Default SVGO Configuration

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/types.md

Shows the default SVGO configuration used when optimization is enabled without a custom configuration. It includes preset defaults, dimension removal, and ID prefixing.

```typescript
const defaultSvgoConfig: Config = {
  plugins: [
    'preset-default',
    'removeDimensions',
    {
      name: 'prefixIds',
      params: {
        prefix(_, info) {
          return 'i' + hashCode(info.path)
        },
      },
    },
  ],
}
```

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

### Vite Plugin Execution Order

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/architecture.md

Outlines the sequence of operations for the Vite SVG loader plugin, emphasizing its 'pre' enforcement and conditional processing steps.

```text
SVG Loader Plugin (pre)
    ↓ (only if matches *.svg)
Check explicitImportsOnly logic
    ↓
Read file from disk
    ↓
Apply import type logic (query)
    ↓
[Conditional] SVGO Optimization
    ↓
[Conditional] Vue Template Compilation
    ↓
Export JavaScript code
    ↓
Other Plugins (normal order)
    ↓
Build Output
```

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

### Utility Functions

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Reference for utility functions exported by the module, such as hashCode.

```APIDOC
## Utility Functions API

### Description
Provides access to various utility functions that may be useful for developers working with the nuxt-svgo module.

### Functions
- **hashCode()** (function) - A utility function for generating hash codes, likely used internally for optimization or identification.
```

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

### Standard Module Usage

Source: https://github.com/cpsoinos/nuxt-svgo/blob/main/_autodocs/utilities-and-exports.md

This TypeScript snippet shows the standard way to include the nuxt-svgo module in your Nuxt configuration file.

```typescript
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    // Configuration
  },
})
```