### Install and Run Project Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Standard commands to install dependencies, navigate to the project directory, and run development or build processes.

```bash
pnpm install
cd ./packages/playground/basic
pnpm run dev
pnpm run build
```

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

### React Setup Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

A complete example for integrating vite-plugin-svg-icons into a React project. It shows the essential setup steps for React applications.

```typescript
import { ViteSvgIconsPlugin } from "vite-plugin-svg-icons";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    react(),
    ViteSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/icons")],
    }),
  ],
});
```

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

### Vue 3 Setup Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

A complete example demonstrating how to set up vite-plugin-svg-icons in a Vue 3 project. This includes necessary imports and basic configuration.

```typescript
import { ViteSvgIconsPlugin } from "vite-plugin-svg-icons";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue(),
    ViteSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/icons")],
      // default:
      // symbolId: "icon-[dir]-[name]",
    }),
  ],
});
```

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

### Install Dependencies

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/usage-examples.md

Install the plugin and necessary Vite dependencies.

```bash
npm install vite-plugin-svg-icons -D
npm install vite @vitejs/plugin-vue -D
```

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

### Complete Configuration Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating all major configuration options, including icon directories, symbol ID format, SVG optimization, and DOM injection.

```typescript
import {
  createSvgIconsPlugin
} from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      // Required: specify icon directories
      iconDirs: [
        path.resolve(process.cwd(), 'src/icons'),
        path.resolve(process.cwd(), 'src/assets/icons'),
      ],

      // Optional: customize symbol ID format
      symbolId: 'icon-[dir]-[name]',

      // Optional: control SVG optimization
      svgoOptions: {
        removeViewBox: false,
        removeHiddenElems: true,
        removeUselessStrokeAndFill: true,
      },

      // Optional: control DOM injection position
      inject: 'body-last',

      // Optional: customize DOM element ID
      customDomId: '__svg__icons__dom__',
    }),
  ],
}
```

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

### Basic SVG Icons Plugin Setup

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Demonstrates the basic setup for the `createSvgIconsPlugin` by specifying the directory where SVG icons are located. Ensure the `path` module is imported.

```typescript
createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
})
```

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

### Colored Icons Implementation Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Provides an example of how to implement colored SVG icons, allowing for dynamic color changes or using icons with multiple colors.

```vue
<template>
  <svg-icon name="logos:vue" color="#1890ff"></svg-icon>
  <svg-icon name="logos:react" color="#2cb572"></svg-icon>
</template>

<script lang="ts" setup>
// No specific script needed for basic color application
</script>
```

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

### Install vite-plugin-svg-icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Install the plugin using yarn, npm, or pnpm. Ensure your Node.js and Vite versions meet the requirements.

```bash
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
```

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

### TypeScript Usage Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Demonstrates how to use the plugin with TypeScript, including type definitions for configuration options and generated modules.

```typescript
import { ViteSvgIconsPlugin, ViteSvgIconsPluginOptions } from "vite-plugin-svg-icons";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

const options: ViteSvgIconsPluginOptions = {
  iconDirs: [path.resolve(process.cwd(), "src/icons")],
  symbolId: "custom-icon-[name]",
};

export default defineConfig({
  plugins: [
    vue(),
    ViteSvgIconsPlugin(options),
  ],
});
```

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

### Example: Development Tools for SVG Icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Utilize the iconsNames array for debugging, filtering, and generating documentation during development.

```typescript
import iconsNames from 'virtual:svg-icons-names'

// Log all available icons for debugging
console.log('Available icons:', iconsNames.length)
console.log(iconsNames.sort())

// Find icons by pattern
const buttonIcons = iconsNames.filter(name => name.includes('button'))
console.log('Button icons:', buttonIcons)

// Generate documentation
const iconDocs = iconsNames.map(name => ({
  id: name,
  usage: `<use href="#${name}" />`,
}))
```

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

### Example: Icon Gallery Component

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Display a gallery of all available SVG icons with their names using React.

```typescript
import iconsNames from 'virtual:svg-icons-names'

export default function IconGallery() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}>
      {iconsNames.map(iconId => (
        <div key={iconId} style={{ textAlign: 'center', padding: '20px' }}>
          <svg style={{ width: '50px', height: '50px' }}>
            <use href={`#${iconId}`} />
          </svg>
          <p style={{ fontSize: '12px', marginTop: '10px' }}>{iconId}</p>
        </div>
      ))}
    </div>
  )
}
```

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

### Basic Vite Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/configuration.md

Configure the plugin to specify the directory where your SVG icons are located. This is the minimum required setup.

```typescript
import {
  createSvgIconsPlugin
} from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
    }),
  ],
}
```

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

### React Usage Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Shows how to import the virtual module in a React application's entry point and includes a basic SvgIcon component for usage.

```jsx
// src/main.jsx
import 'virtual:svg-icons-register'

import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')).render(<App />)
```

```jsx
// src/components/SvgIcon.jsx
export default function SvgIcon({ name, color = '#333' }) {
  return (
    <svg aria-hidden="true">
      <use href={`#icon-${name}`} fill={color} />
    </svg>
  )
}

// Usage in components
<SvgIcon name="button-primary" color="#007bff" />
```

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

### Usage Example in main.ts/main.js

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Demonstrates the basic import of the virtual module in a JavaScript or TypeScript entry file to make SVG icons available.

```typescript
// main.ts or main.js
import 'virtual:svg-icons-register'

// Now SVG icons are available for use
// <use href="#icon-button-primary" /> will work
```

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

### Performance Benchmark Test Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Includes examples of performance benchmarks to measure the efficiency of SVG icon processing and rendering.

```typescript
import { compilerIcons } from "@/core";
import path from "path";

describe("Performance Benchmarks", () => {
  it("should compile icons efficiently", async () => {
    const startTime = performance.now();
    await compilerIcons([path.resolve(__dirname, "./__fixtures__/icons")], "dist");
    const endTime = performance.now();
    const duration = endTime - startTime;
    console.log(`Icon compilation took ${duration}ms`);
    // Assert that duration is within acceptable limits (e.g., < 1000ms)
    expect(duration).toBeLessThan(1000);
  });
});
```

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

### Example: Basic Usage of SVG Icons Names

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Log the array of all compiled SVG symbol IDs to the console.

```typescript
import iconsNames from 'virtual:svg-icons-names'

console.log(iconsNames)
// Output: ['icon-icon1', 'icon-icon2', 'icon-button-primary', ...]
```

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

### Vue Usage Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Illustrates importing the virtual module in a Vue application's entry point and provides a reusable SvgIcon component.

```typescript
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register'

const app = createApp(App)
app.mount('#app')
```

```vue
<!-- src/components/SvgIcon.vue -->
<template>
  <svg :style="{ color }">
    <use :href="`#${symbolId}`" />
  </svg>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    prefix: {
      type: String,
      default: 'icon',
    },
    color: {
      type: String,
      default: 'currentColor',
    },
  },
  setup(props) {
    const symbolId = computed(() => `${props.prefix}-${props.name}`)
    return { symbolId }
  },
}
</script>
```

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

### Custom SVGO Configuration Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Demonstrates how to apply custom SVGO configurations to optimize SVG icons when using the plugin. This allows fine-grained control over SVG optimization.

```typescript
import { ViteSvgIconsPlugin } from "vite-plugin-svg-icons";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue(),
    ViteSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/icons")],
      svgoOptions: {
        // plugins: [
        //   {
        //     name: "removeViewBox",
        //     active: false,
        //   },
        // ],
      },
    }),
  ],
});
```

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

### Example: Vue Template for Icon Picker

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Create a select dropdown in a Vue template, populated with available SVG icon names.

```vue
<template>
  <select>
    <option>Select an icon</option>
    <option v-for="name in iconsNames" :key="name" :value="name">
      {{ name }}
    </option>
  </select>
</template>

<script>
import { defineComponent } from 'vue'
import iconsNames from 'virtual:svg-icons-names'

export default defineComponent({
  setup() {
    return { iconsNames }
  },
})
</script>
```

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

### Dynamic Icon Selection Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Illustrates how to dynamically select and render SVG icons based on changing conditions or user input within your application.

```vue
<template>
  <div @click="changeIcon">
    <svg-icon :name="state.iconName"></svg-icon>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const state = reactive({
  iconName: "logos:vue",
});

const changeIcon = () => {
  state.iconName = state.iconName === "logos:vue" ? "logos:react" : "logos:vue";
};
</script>

<style scoped>
svg {
  width: 100px;
  height: 100px;
}
</style>
```

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

### Vite Plugin Svg Icons File Organization

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/README.md

This structure outlines the organization of the documentation files for the Vite plugin. It helps users navigate to specific topics like API references, configuration guides, and usage examples.

```text
/workspace/home/output/
├── INDEX.md                    (Main navigation hub)
├── README.md                   (This file)
├── api-reference.md            (Function documentation)
├── types.md                    (Type definitions)
├── configuration.md            (Configuration guide)
├── virtual-modules.md          (Virtual module docs)
├── module-exports.md           (Export listing)
├── architecture.md             (Internal design)
├── internal-functions.md       (Advanced utilities)
├── usage-examples.md           (Working examples)
└── testing-api.md              (Testing guide)
```

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

### Create ViteSvgIconsPlugin with Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/types.md

Example of how to configure and create an instance of the ViteSvgIconsPlugin. This snippet demonstrates setting icon directories, symbol ID format, DOM injection, custom DOM ID, and SVG optimization options.

```typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

const config: ViteSvgIconsPlugin = {
  iconDirs: [
    path.resolve(__dirname, 'src/icons'),
    path.resolve(__dirname, 'src/components/icons')
  ],
  symbolId: 'icon-[dir]-[name]',
  inject: 'body-last',
  customDomId: 'my-svg-icons',
  svgoOptions: {
    removeViewBox: false,
    removeHiddenElems: true,
  },
}

const plugin = createSvgIconsPlugin(config)
```

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

### Usage Examples for SVG Icon Names

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Demonstrates how to use the imported icon names array for validation, populating options, and creating type-safe selections.

```typescript
// Validate icon existence
if (iconsNames.includes('icon-home')) { /* ok */ }

// Build icon picker
iconsNames.forEach(id => options.push({ value: id }))

// Type-safe icon selection
type IconName = typeof iconsNames[number]
```

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

### Error Handling Test Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Demonstrates how to test error handling scenarios, ensuring the plugin behaves correctly when encountering unexpected issues.

```typescript
import { compilerIcon } from "@/core";
import path from "path";

describe("Error Handling Tests", () => {
  it("should throw an error for invalid icon path", async () => {
    await expect(compilerIcon(path.resolve(__dirname, "./__fixtures__/non-existent.svg"), "dist")).rejects.toThrow();
  });

  it("should handle invalid SVG content gracefully", async () => {
    // Assuming a test file with malformed SVG content exists
    await expect(compilerIcon(path.resolve(__dirname, "./__fixtures__/malformed.svg"), "dist")).rejects.toThrow();
  });
});
```

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

### Example: React Component for Icon Picker

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Render a select dropdown populated with available SVG icon names using React.

```typescript
import iconsNames from 'virtual:svg-icons-names'

export default function IconPicker() {
  return (
    <select>
      <option>Select an icon</option>
      {iconsNames.map(name => (
        <option key={name} value={name}>{name}</option>
      ))}
    </select>
  )
}
```

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

### Configure SVG Icon Injection

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/types.md

Example configuration for ViteSvgIconsPlugin, specifying icon directories and the injection position for SVG sprites.

```typescript
const config: ViteSvgIconsPlugin = {
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  inject: 'body-first', // Inject at start of body
}
```

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

### Vue App Usage with SvgIcon

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Example of how to use the SvgIcon component in a Vue application. It demonstrates rendering multiple icons, including one from a subdirectory.

```vue
<template>
  <div>
    <SvgIcon name="icon1"></SvgIcon>
    <SvgIcon name="icon2"></SvgIcon>
    <SvgIcon name="icon3"></SvgIcon>
    <SvgIcon name="dir-icon1"></SvgIcon>
  </div>
</template>

<script>
import {
  defineComponent,
  computed
} from 'vue'

import SvgIcon from './components/SvgIcon.vue'
export default defineComponent({
  name: 'App',
  components: { SvgIcon },
})
</script>
```

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

### Cache Management Performance Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/internal-functions.md

Illustrates the performance benefits of the plugin's caching mechanism. On the first build, all SVGs are compiled. Subsequent requests for unchanged files are nearly instantaneous, with only modified or new files triggering recompilation.

```typescript
// First build: Scans and compiles all SVGs
const { insertHtml, idSet } = await compilerIcons(cache, svgoOptions, options)
// Cache now contains all compiled icons

// Subsequent requests (unchanged files):
// Reading from cache is nearly instantaneous
// Only modified/new files trigger recompilation
```

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

### Type-Safe Icon Usage Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Shows how to use SVG icons in a type-safe manner, leveraging TypeScript to ensure that only valid icon names are used.

```vue
<template>
  <svg-icon name="logos:vue"></svg-icon>
  <svg-icon :name="state.iconName"></svg-icon>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const state = reactive({
  iconName: "logos:react",
});
</script>
```

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

### Unit Test Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

A unit test demonstrating the testing of internal functions or components related to SVG icon handling.

```typescript
import { createSymbolId } from "@/core";

describe("createSymbolId", () => {
  it("should create a symbol id correctly", () => {
    expect(createSymbolId("icon", "logo", "vue")).toBe("icon-logo-vue");
  });
});
```

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

### Import Virtual Modules

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Import virtual modules to register SVG icons or get a list of icon names.

```typescript
// Virtual modules
import 'virtual:svg-icons-register'
import iconsNames from 'virtual:svg-icons-names'
```

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

### Configure Custom SVGO Optimization Settings

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/usage-examples.md

Customize the SVGO optimization process within your Vite configuration to fine-tune how SVG files are processed. This example keeps the viewBox and optimizes path data.

```typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
      
      // Custom SVGO optimization
      svgoOptions: {
        // Keep viewBox for responsive scaling
        removeViewBox: false,
        
        // Remove unused definitions
        removeUnknownsAndDefaults: true,
        
        // Optimize paths
        convertPathData: {
          noSpaceAfterFlags: false,
        },
        
        // Remove metadata
        removeMetadata: true,
        removeComments: true,
        removeDesc: true,
        removeTitle: true,
        
        // Optimize transforms
        convertTransform: true,
        removeEmptyAttrs: true,
        removeEmptyContainers: true,
      },
    }),
  ],
}
```

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

### React App Usage with SvgIcon

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Example of how to use the SvgIcon component in a React application. It renders several icons, including one from a nested directory.

```jsx
import SvgIcon from './components/SvgIcon'

export default function App() {
  return (
    <>
      <SvgIcon name="icon1"></SvgIcon>
      <SvgIcon name="icon1"></SvgIcon>
      <SvgIcon name="icon1"></SvgIcon>
      <SvgIcon name="dir-icon1"></SvgIcon>
    </>
  )
}
```

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

### Custom SVGO Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Applies custom SVGO optimization options to the SVG icons processed by the plugin. This example disables `removeViewBox` and enables `removeHiddenElems`.

```typescript
createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  svgoOptions: {
    removeViewBox: false,
    removeHiddenElems: true,
  },
})
```

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

### Configure Development Server Middleware

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/internal-functions.md

The configureServer hook installs middleware to handle requests for virtual SVG icon modules. It sets CORS, Cache-Control, and Etag headers for efficient serving and caching.

```typescript
configureServer: ({ middlewares }) => {
  middlewares.use(cors({ origin: '*' }))
  middlewares.use(async (req, res, next) => {
    const url = normalizePath(req.url!)
    
    const registerId = `/@id/${SVG_ICONS_REGISTER_NAME}`
    const clientId = `/@id/${SVG_ICONS_CLIENT}`
    
    if ([clientId, registerId].some((item) => url.endsWith(item))) {
      // Handle virtual module request
      res.setHeader('Content-Type', 'application/javascript')
      res.setHeader('Cache-Control', 'no-cache')
      
      const { code, idSet } = await createModuleCode(...)
      const content = url.endsWith(registerId) ? code : idSet
      
      // Use Etag for cache busting on changes
      res.setHeader('Etag', getEtag(content, { weak: true }))
      res.statusCode = 200
      res.end(content)
    } else {
      next()
    }
  })
}
```

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

### Type-Safe Usage of TypedSvgIcon

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/usage-examples.md

This example demonstrates how to use the `TypedSvgIcon` component with valid and invalid icon names. TypeScript will flag attempts to use non-existent icon names. No specific imports are required beyond the component itself.

```typescript
// src/App.tsx
<TypedSvgIcon name="home" /> {/* OK */}
<TypedSvgIcon name="settings" size="large" /> {/* OK */}
<TypedSvgIcon name="unknown" /> {/* TypeScript error */}
```

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

### Vue Icon Gallery Component

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/usage-examples.md

Implement an icon gallery component in Vue using the `virtual:svg-icons-names` module. This example groups icons by their directory prefix and displays them in a grid layout. It utilizes Vue's template syntax and script setup for reactivity.

```vue
<!-- src/components/IconGallery.vue -->
<template>
  <div class="gallery">
    <h1>Icon Gallery ({{ allIcons.length }} icons)</h1>
    
    <section v-for="(icons, group) in groupedIcons" :key="group" class="group">
      <h2>{{ group }} ({{ icons.length }})</h2>
      <div class="grid">
        <div v-for="iconId in icons" :key="iconId" class="icon-card">
          <svg class="icon">
            <use :href="`#${iconId}`" />
          </svg>
          <p class="name">{{ iconId }}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import allIcons from 'virtual:svg-icons-names'

const groupedIcons = computed(() => {
  const groups: Record<string, string[]> = {}
  
  allIcons.forEach(name => {
    const [group] = name.split('-')
    if (!groups[group]) {
      groups[group] = []
    }
    groups[group].push(name)
  })
  
  return groups
})
</script>

<style scoped>
.gallery {
  padding: 20px;
}

.group {
  margin-bottom: 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

.icon-card {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  text-align: center;
}

.icon {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  display: block;
}

.name {
  font-size: 12px;
  margin-top: 5px;
  word-break: break-word;
}
</style>
```

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

### Initialization and Lifecycle

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/architecture.md

Describes the plugin's initialization steps and its interaction with the Vite build process, including configuration resolution, ID resolution, and module loading.

```markdown
1. createSvgIconsPlugin(options) called
   ├─ Validate options (symbolId contains [name])
   ├─ Merge with defaults
   ├─ Initialize empty cache
   └─ Return Vite Plugin object

2. Vite loads plugin
   ├─ Call configResolved()
   │  └─ Set isBuild flag
   ├─ Call resolveId() when modules needed
   └─ Call load() to generate code
```

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

### Get Available SVG Icon Symbol IDs

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/api-reference.md

Import this virtual module to get an array of all available icon symbol IDs. This is useful for iterating or referencing icons by their generated IDs.

```typescript
import ids from 'virtual:svg-icons-names'
// Example: ['icon-icon1', 'icon-icon2', 'icon-dir-icon1']
```

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

### Get all SymbolIds

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Import and use the `virtual:svg-icons-names` module to retrieve an array of all generated symbol IDs.

```typescript
import ids from 'virtual:svg-icons-names'
// => ['icon-icon1','icon-icon2','icon-icon3']
```

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

### TypeScript Usage with Type Hints

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Demonstrates how TypeScript recognizes 'iconsNames' as a string array after correct configuration.

```typescript
import iconsNames from 'virtual:svg-icons-names'

// TypeScript knows iconsNames is string[]
iconsNames.forEach(name => console.log(name))
```

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

### Example: Validating Icon Names

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Check if a given icon name exists in the compiled SVG symbol IDs before using it.

```typescript
import iconsNames from 'virtual:svg-icons-names'

const iconName = 'button-primary'
const symbolId = `icon-${iconName}`

if (iconsNames.includes(symbolId)) {
  // Safe to use this icon
} else {
  // Icon not available, use fallback
  console.warn(`Icon ${symbolId} not found`)
}
```

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

### Import createSvgIconsPlugin with Configuration Type

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/module-exports.md

Imports the createSvgIconsPlugin and its configuration type ViteSvgIconsPlugin. Use ViteSvgIconsPlugin to define configuration options like icon directories.

```typescript
import { createSvgIconsPlugin, type ViteSvgIconsPlugin } from 'vite-plugin-svg-icons'

const config: ViteSvgIconsPlugin = {
  iconDirs: ['src/icons'],
}
```

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

### Discrete Directory

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/README.md

Determines the file name and directory name for a given icon name.

```typescript
discreteDir(name): {fileName, dirName}
```

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

### compilerIcons()

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Compiles multiple SVG icons in batch.

```APIDOC
## compilerIcons(filePaths, options)

### Description
Compiles multiple SVG icon files in a batch process.

### Method
Internal function, not directly called by users.

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **filePaths** (string[]) - Required - An array of paths to the SVG icon files.
- **options** (OptimizeOptions) - Optional - SVGO configuration options.

### Request Example
```javascript
// This function is typically called internally by the plugin.
// Example of parameters it might receive:
const filePaths = ['/path/to/icon1.svg', '/path/to/icon2.svg'];
const options = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};
// compilerIcons(filePaths, options);
```

### Response
#### Success Response (200)
Returns an array of compiled SVG content.

#### Response Example
```javascript
// Returns an array of strings, where each string is the compiled SVG content.
// e.g., ['<svg>...</svg>', '<svg>...</svg>']
```
```

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

### Import createSvgIconsPlugin

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/module-exports.md

Basic import statement for the createSvgIconsPlugin function from the vite-plugin-svg-icons package.

```typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
```

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

### React Virtual Module Usage

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Example of how to import and use the virtual module `virtual:svg-icons-names` within a React application to access icon names.

```typescript
import React from 'react';
import svgIcons from 'virtual:svg-icons-names';

const IconList: React.FC = () => {
  return (
    <div>
      <h2>Available Icons:</h2>
      <ul>
        {svgIcons.map((iconName) => (
          <li key={iconName}>{iconName}</li>
        ))}
      </ul>
    </div>
  );
};

export default IconList;
```

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

### Package JSON Exports Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/module-exports.md

Defines the entry points for the package, specifying CommonJS, ESModule, and TypeScript definitions.

```json
{
  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  }
}
```

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

### Development Workflow for vite-plugin-svg-icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/README.md

Illustrates the process of SVG file scanning, caching, compilation, and module code generation during development. This flow ensures efficient handling of SVG assets.

```mermaid
graph TD
    A[SVG Files] --> B(Scanner fast-glob)
    B --> C{Cache Check}
    C -- Hit --> D[Reuse Code]
    C -- Miss --> E[Compile]
    E --> F[Store in Cache]
    E --> G[Generate Module Code]
    G --> H[Return to Browser]
```

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

### Import Utility Functions

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Import utility functions like symbol ID generation and path discretization.

```typescript
// Utility functions
import { createSymbolId, discreteDir } from 'vite-plugin-svg-icons'
```

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

### Configure TypeScript for SVG Icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.md

Add this configuration to your tsconfig.json to enable TypeScript support for SVG icons. Ensure the path matches your project setup.

```json
// tsconfig.json
{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}
```

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

### Symbol ID Validation Test Example

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Tests specifically designed to validate the correct generation of Symbol IDs, ensuring consistency and adherence to the defined pattern.

```typescript
import { createSymbolId } from "@/core";

describe("Symbol ID validation", () => {
  it("should generate correct symbol IDs for various inputs", () => {
    expect(createSymbolId("icon", "logo", "vue")).toBe("icon-logo-vue");
    expect(createSymbolId("custom", "my-icon", "test")).toBe("custom-my-icon-test");
    expect(createSymbolId("prefix", "another", "icon")).toBe("prefix-another-icon");
  });
});
```

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

### Multiple Icon Directories Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Sets up the `createSvgIconsPlugin` to scan for SVG icons in multiple directories. This is useful when icons are distributed across different parts of the project.

```typescript
createSvgIconsPlugin({
  iconDirs: [
    path.resolve(process.cwd(), 'src/icons'),
    path.resolve(process.cwd(), 'src/components/icons'),
  ],
})
```

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

### Import Main Export

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Import the main plugin factory function for creating the SVG icons plugin.

```typescript
// Main export
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
```

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

### createSvgIconsPlugin()

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Plugin factory function to create the vite-plugin-svg-icons instance.

```APIDOC
## createSvgIconsPlugin(options)

### Description
Factory function to create the SVG icons plugin for Vite.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (ViteSvgIconsPlugin) - Required - Plugin configuration object.

### Request Example
```javascript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      svgoOptions: true,
    }),
  ],
};
```

### Response
#### Success Response (200)
Returns the plugin instance.

#### Response Example
```javascript
// Plugin instance is returned and used within Vite's config.
```
```

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

### Custom DOM Injection Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Configures how SVG icons are injected into the DOM. This example specifies injection into the 'body-first' position and sets a custom ID for the DOM element containing the icons.

```typescript
createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  inject: 'body-first',
  customDomId: 'my-icons',
})
```

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

### Define SVG Sprite Injection Position (DomInject)

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/types.md

Defines the allowed positions for injecting SVG sprites into the DOM. Use 'body-first' to insert at the start of the body or 'body-last' to insert before the last child.

```typescript
type DomInject = 'body-first' | 'body-last'
```

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

### Import with Types

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Import the main plugin factory and its associated types for enhanced type safety.

```typescript
// With types
import {
  createSvgIconsPlugin,
  type ViteSvgIconsPlugin
} from 'vite-plugin-svg-icons'
```

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

### Virtual Module Resolution Flow

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/architecture.md

Illustrates the browser's import process for virtual SVG icon modules and how Vite's resolveId and load hooks handle these requests during development and build.

```markdown
Browser: import 'virtual:svg-icons-register'
         │
         ▼
resolveId('virtual:svg-icons-register')
         │
         ├─ ID matches?
         │  └─ Yes: return id
         │
         ▼
load('virtual:svg-icons-register')
         │
         ├─ Is this a build? Is this SSR?
         │  └─ Dev SSR: return empty export
         │  └─ Dev/Build: return actual code
         │
         ▼
Return generated module code
         │
         ▼
Browser executes code
```

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

### createSvgIconsPlugin

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/api-reference.md

Creates a Vite plugin that scans icon directories, optimizes SVGs, compiles them into a sprite sheet, and injects it into the HTML document. It also provides virtual modules for accessing icon names and registering the sprite.

```APIDOC
## createSvgIconsPlugin

### Description
Creates a Vite plugin that generates SVG sprite maps from a directory of SVG files.

### Signature
```typescript
function createSvgIconsPlugin(opt: ViteSvgIconsPlugin): Plugin
```

### Parameters
#### Parameters
- **opt** (ViteSvgIconsPlugin) - Required - Plugin configuration object containing icon directories and optional settings

### Returns
A Vite `Plugin` object that can be used in a Vite configuration file.

### Throws
- **Error**: If the `symbolId` template does not contain the `[name]` placeholder, an error is thrown: "SymbolId must contain [name] string!"

### Usage Example
```typescript
// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__',
      svgoOptions: true,
    }),
  ],
}
```
```

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

### React Icon Gallery Component

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/usage-examples.md

Implement an icon gallery component in React using the `virtual:svg-icons-names` module. This example groups icons by their directory prefix and displays them in a grid layout. Ensure you have a `SvgIcon` component available.

```typescript
// src/components/IconGallery.tsx
import { useMemo } from 'react'
import iconsNames from 'virtual:svg-icons-names'
import { SvgIcon } from './SvgIcon'

export function IconGallery() {
  // Group icons by prefix
  const groupedIcons = useMemo(() => {
    const groups: Record<string, string[]> = {}
    
    iconsNames.forEach(name => {
      const [group] = name.split('-')
      if (!groups[group]) {
        groups[group] = []
      }
      groups[group].push(name)
    })
    
    return groups
  }, [])

  return (
    <div style={{ padding: '20px' }}>
      <h1>Icon Gallery ({iconsNames.length} icons)</h1>
      
      {Object.entries(groupedIcons).map(([group, icons]) => (
        <section key={group} style={{ marginBottom: '30px' }}>
          <h2>{group} ({icons.length})</h2>
          <div
            style={{ 
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
              gap: '10px',
            }}>
            {icons.map(iconId => (
              <div
                key={iconId}
                style={{ 
                  padding: '10px',
                  border: '1px solid #eee',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}>
                <SvgIcon name={iconId.replace('icon-', '')} size="medium" />
                <p style={{ fontSize: '12px', marginTop: '5px' }}>
                  {iconId}
                </p>
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  )
}
```

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

### Create SVG Icons Plugin

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/README.md

Use this function to create the Vite plugin instance. It requires configuration options for the plugin.

```typescript
createSvgIconsPlugin(opt: ViteSvgIconsPlugin): Plugin
```

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

### Virtual Module Imports for SVG Icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/module-exports.md

Demonstrates how to import the virtual modules for SVG sprite injection and retrieving icon names. Use 'virtual:svg-icons-register' to inject sprites and 'virtual:svg-icons-names' to get an array of icon names.

```typescript
// Inject sprite
import 'virtual:svg-icons-register'

// Get icon names
import iconsNames from 'virtual:svg-icons-names'
```

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

### Constants Definitions

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/architecture.md

Defines key string constants used throughout the plugin for virtual module names, IDs, and XML namespaces.

```text
constants.ts
├── SVG_ICONS_REGISTER_NAME    = 'virtual:svg-icons-register'
├── SVG_ICONS_CLIENT           = 'virtual:svg-icons-names'
├── SVG_DOM_ID                 = '__svg__icons__dom__'
├── XMLNS                      = 'http://www.w3.org/2000/svg'
└── XMLNS_LINK                 = 'http://www.w3.org/1999/xlink'
```

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

### Module Hierarchy

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/architecture.md

Provides an overview of the main module exports and their functions within the vite-plugin-svg-icons library.

```text
vite-plugin-svg-icons (main export)
├── createSvgIconsPlugin()  [Public API - Plugin factory]
├── createModuleCode()      [Public export - Module generation]
├── compilerIcons()         [Public export - Batch compilation]
├── compilerIcon()          [Public export - Single file compilation]
├── createSymbolId()        [Public export - ID generation]
├── discreteDir()           [Public export - Path utilities]
├── ViteSvgIconsPlugin      [Type export]
├── FileStats               [Type export]
└── DomInject               [Type export]
```

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

### Import Virtual Modules for SVG Icons

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/virtual-modules.md

Import the 'virtual:svg-icons-register' module to register SVG sprites in the DOM. Optionally, import 'virtual:svg-icons-names' to get a list of available icon names. The registration module should be imported early in your application's initialization.

```typescript
// Essential: Register the sprite in the DOM
import 'virtual:svg-icons-register'

// Optional: Get list of available icons
import iconsNames from 'virtual:svg-icons-names'
```

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

### Build Mode Data Flow

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/architecture.md

Describes the process during the build phase, showing how the plugin's load function processes virtual modules and includes the generated SVG sprite code within the final bundle.

```text
npm run build
         │
         ▼
Vite build process
         │
         ├─▶ Plugin.load() for virtual modules
         │        │
         │        ▼
         │   createModuleCode()  [Same as dev]
         │        │
         │        ▼
         │   Code included in bundle
         │
         ▼
Built JavaScript includes:
├── SVG sprite injection code
├── Icon names array
└── All compiled SVG symbols
```

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

### ViteSvgIconsPlugin Configuration with SVGO Options

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/types.md

Demonstrates how to configure the ViteSvgIconsPlugin with SVGO optimization options. You can either disable optimization entirely by setting svgoOptions to false, or provide a custom configuration object to fine-tune the optimization process.

```typescript
const config: ViteSvgIconsPlugin = {
  iconDirs: ['src/icons'],
  // Disable optimization
  svgoOptions: false,
  
  // Or use custom SVGO configuration
  svgoOptions: {
    removeViewBox: false,  // Keep viewBox for responsive scaling
    removeHiddenElems: true,
    convertPathData: true,
  },
}
```

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

### Configuration Object for Vite SVG Icons Plugin

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/INDEX.md

Defines the structure and types for the plugin's configuration object. Ensure 'iconDirs' is provided as it's the only required property.

```typescript
{
  iconDirs: string[]                    // Required
  svgoOptions?: boolean | OptimizeOptions  // Default: true
  symbolId?: string                     // Default: 'icon-[dir]-[name]'
  inject?: 'body-first' | 'body-last'  // Default: 'body-last'
  customDomId?: string                  // Default: '__svg__icons__dom__'
}
```

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

### compilerIcon()

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Compiles a single SVG icon file.

```APIDOC
## compilerIcon(filePath, options)

### Description
Compiles a single SVG icon file, applying optimizations.

### Method
Internal function, not directly called by users.

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **filePath** (string) - Required - The path to the SVG icon file.
- **options** (OptimizeOptions) - Optional - SVGO configuration options.

### Request Example
```javascript
// This function is typically called internally by the plugin.
// Example of parameters it might receive:
const filePath = '/path/to/single-icon.svg';
const options = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};
// compilerIcon(filePath, options);
```

### Response
#### Success Response (200)
Returns the compiled SVG content as a string.

#### Response Example
```javascript
// Returns a string like: '<svg>...</svg>'
```
```

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

### Test createSvgIconsPlugin with Mock Vite

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/testing-api.md

Tests the createSvgIconsPlugin function using a mock Vite plugin system. Ensures proper error handling for missing symbol IDs and verifies default and merged options.

```typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import fs from 'fs-extra'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

describe('createSvgIconsPlugin', () => {
  let testDir: string

  beforeEach(async () => {
    testDir = path.join(__dirname, 'test-icons')
    await fs.ensureDir(testDir)
  })

  afterEach(async () => {
    await fs.remove(testDir)
  })

  it('should throw error if symbolId missing [name]', () => {
    expect(() => {
      createSvgIconsPlugin({
        iconDirs: [testDir],
        symbolId: 'icon-[dir]', // Missing [name]
      })
    }).toThrow('SymbolId must contain [name] string!')
  })

  it('should create plugin with default options', () => {
    const plugin = createSvgIconsPlugin({
      iconDirs: [testDir],
    })

    expect(plugin).toBeDefined()
    expect(plugin.name).toBe('vite:svg-icons')
    expect(plugin.resolveId).toBeDefined()
    expect(plugin.load).toBeDefined()
  })

  it('should merge user options with defaults', () => {
    const plugin = createSvgIconsPlugin({
      iconDirs: [testDir],
      symbolId: 'custom-[dir]-[name]',
      customDomId: 'my-sprite',
    })

    expect(plugin).toBeDefined()
    // Plugin internally merges options
  })
})
```

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

### Create SVG Icons Plugin Configuration

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/api-reference.md

Configure the vite-plugin-svg-icons by specifying icon directories, symbol ID format, injection method, custom DOM ID, and SVGO options. Ensure the symbolId template includes '[name]'.

```typescript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__',
      svgoOptions: true,
    }),
  ],
}
```

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

### Public Types

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/README.md

Key type definitions used for configuring and interacting with the plugin.

```APIDOC
## Public Types

### `ViteSvgIconsPlugin`

The main configuration interface for the plugin.

### `DomInject`

Defines the injection point for SVG sprites. Possible values: `'body-first'` | `'body-last'`.

### `FileStats`

Represents the structure of a cache entry for file statistics.

### `OptimizeOptions`

Configuration options for SVGO optimization (re-exported).
```

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

### discreteDir()

Source: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Utility function for path manipulation.

```APIDOC
## discreteDir(dirPath)

### Description
Utility function to discretize a directory path, useful for path manipulation.

### Method
Internal function, not directly called by users.

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **dirPath** (string) - Required - The directory path to process.

### Request Example
```javascript
// This function is typically called internally by the plugin.
// Example of parameters it might receive:
const dirPath = '/path/to/some/directory';
// discreteDir(dirPath);
```

### Response
#### Success Response (200)
Returns the processed directory path string.

#### Response Example
```javascript
// Returns a string representing the discretized path.
// e.g., '/path/to/some/directory'
```
```