### Install Icon Collections

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Install the necessary icon collections. You can install all icons from @iconify/json or individual packages like @iconify-json/mdi.

```sh
# install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D
```

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

### Install Tailwindcss Icons Plugin and Icon Packages

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Install the main plugin and icon collections as development dependencies. Consider installing individual icon packages for better performance.

```bash
# Install the plugin
npm i @egoist/tailwindcss-icons -D

# Install all icons (50MB)
npm i @iconify/json -D

# Or install individual icon packages (recommended)
npm i @iconify-json/mdi @iconify-json/lucide @iconify-json/heroicons -D
```

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

### Install Tailwind CSS Icons Plugin

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Install the package as a development dependency using npm.

```sh
npm i @egoist/tailwindcss-icons -D
```

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

### HTML Usage Examples

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Examples of using icons in HTML with various TailwindCSS utilities for styling and layout. Icons inherit text color and scale with text size.

```html
<!-- Usage in HTML -->
<div class="flex items-center gap-2">
  <span class="i-lucide-home text-blue-500"></span>
  <span class="i-mdi-settings text-gray-600 hover:text-gray-900"></span>
  <span class="i-heroicons-bell text-2xl"></span>
</div>

<!-- Icons scale with text size -->
<h1 class="text-4xl">
  <span class="i-lucide-star"></span> <!-- Icon is 4xl sized -->
  Welcome
</h1>

<!-- Icons inherit text color -->
<button class="text-white bg-blue-500 flex items-center gap-2">
  <span class="i-lucide-plus"></span> <!-- Icon is white -->
  Add Item
</button>
```

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

### Load Icon Collections with getIconCollections

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Helper function to load icon data from installed packages or `@iconify/json`. Pass the returned objects to `iconsPlugin`. Auto-discovery is available by omitting the `collections` argument.

```typescript
// tailwind.config.ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'

// Load specific collections (recommended for performance)
const collections = getIconCollections(['mdi', 'lucide', 'tabler'])

// Load all collections from @iconify/json (requires @iconify/json to be installed)
const allCollections = getIconCollections('all')

export default {
  plugins: [
    iconsPlugin({
      collections: collections,
    }),
  ],
}

// Auto-discovery mode: omit collections to auto-detect installed @iconify-json/* packages
export default {
  plugins: [
    iconsPlugin(), // Automatically discovers @iconify-json/heroicons, etc.
  ],
}
```

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

### getIconCollections Usage

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Use the `getIconCollections` helper function to load icon data from installed `@iconify-json/*` packages or from `@iconify/json`.

```APIDOC
## getIconCollections

### Description
A helper function that loads icon data from installed `@iconify-json/*` packages or from `@iconify/json`. Returns icon collection objects that can be passed to the `iconsPlugin`.

### Method
`getIconCollections(collections: string[] | 'all')`

### Parameters
#### Path Parameters
- **collections** (string[] | 'all') - Required - An array of icon collection names (e.g., `['mdi', 'lucide']`) or the string 'all' to load all collections from `@iconify/json`.

### Request Example
```typescript
// tailwind.config.ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'

// Load specific collections (recommended for performance)
const collections = getIconCollections(['mdi', 'lucide', 'tabler'])

// Load all collections from @iconify/json (requires @iconify/json to be installed)
const allCollections = getIconCollections('all')

export default {
  plugins: [
    iconsPlugin({
      collections: collections,
    }),
  ],
}

// Auto-discovery mode: omit collections to auto-detect installed @iconify-json/* packages
export default {
  plugins: [
    iconsPlugin(), // Automatically discovers @iconify-json/heroicons, etc.
  ],
}
```
```

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

### Generated CSS Output for Icon

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Example of the CSS output generated by the plugin for an icon class, showing how SVG is embedded as a data URI mask. This demonstrates how icons are rendered purely with CSS.

```css
/* Generated CSS for i-mdi-home */
.i-mdi-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E");
}

/* With scale: 1.5 option */
.i-mdi-home {
  width: 1.5em;
  height: 1.5em;
  /* ... other properties */
}

/* With extraProperties option */
.i-mdi-home {
  vertical-align: middle;
  /* ... other properties */
}
```

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

### dynamicIconsPlugin Configuration

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Enable dynamic icon loading at build time using bracket notation with `dynamicIconsPlugin`.

```APIDOC
## dynamicIconsPlugin Configuration

### Description
A companion plugin that enables dynamic icon loading at build time using bracket notation. This is useful when you have `@iconify/json` installed and want to use any icon without pre-registering collections.

### Method
`dynamicIconsPlugin(options)`

### Parameters
#### Request Body
- **scale** (number) - Optional - The scale factor relative to font size (default: 1).
- **strokeWidth** (number) - Optional - Customizes stroke width for stroke-based icons.

### Request Example
```typescript
// tailwind.config.ts
import { dynamicIconsPlugin, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  plugins: [
    // Static plugin for autocomplete on frequently used icons
    iconsPlugin(),
    // Dynamic plugin for on-demand icon loading
    dynamicIconsPlugin({
      scale: 1,
      strokeWidth: 2,
    }),
  ],
} satisfies Config
```

### Dynamic Usage
```html
<span class="i-[mdi--home]"></span>
<span class="i-[lucide--settings]"></span>
<span class="i-[heroicons--archive-box]"></span>

<!-- Can also use colon separator -->
<span class="i-[mdi:home]"></span>
```
```

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

### Configure Plugin with CSS

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Configure the plugin using the new TailwindCSS v4 CSS-based configuration syntax in `app.css`. This allows for basic usage or configuration with options like scale and prefix.

```css
/* app.css */

/* Basic usage */
@plugin '@egoist/tailwindcss-icons';

/* With options */
@plugin '@egoist/tailwindcss-icons' {
  scale: 1.5;
  prefix: icon;
}
```

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

### Use Icons in HTML

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Apply icons as CSS classes using the 'i-' prefix followed by the collection and icon name.

```html
<!-- pattern: i-{collection_name}-{icon_name} -->
<span class="i-mdi-home"></span>
```

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

### Configure dynamicIconsPlugin for On-Demand Icon Loading

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Enable dynamic icon loading at build time using bracket notation. Useful with `@iconify/json` for using any icon without pre-registering collections. Combine with `iconsPlugin` for autocomplete.

```typescript
// tailwind.config.ts
import { dynamicIconsPlugin, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  plugins: [
    // Static plugin for autocomplete on frequently used icons
    iconsPlugin(),
    // Dynamic plugin for on-demand icon loading
    dynamicIconsPlugin({
      scale: 1,
      strokeWidth: 2,
    }),
  ],
} satisfies Config

// Dynamic usage with bracket notation (collection--icon format):
// <span class="i-[mdi--home]"></span>
// <span class="i-[lucide--settings]"></span>
// <span class="i-[heroicons--archive-box]"></span>

// Can also use colon separator:
// <span class="i-[mdi:home]"></span>
```

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

### iconsPlugin Configuration

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Configure the iconsPlugin in your tailwind.config.ts to specify icon collections, customize class prefixes, scaling, stroke width, and add extra CSS properties.

```APIDOC
## iconsPlugin Configuration

### Description
Configure the `iconsPlugin` in your `tailwind.config.ts` to specify icon collections, customize class prefixes, scaling, stroke width, and add extra CSS properties.

### Method
`iconsPlugin(options)`

### Parameters
#### Request Body
- **collections** (Array<Object>) - Required - An array of icon collection objects obtained from `getIconCollections()`.
- **prefix** (string) - Optional - The class prefix for icon utilities (default: 'i').
- **scale** (number) - Optional - The scale factor relative to font size (default: 1).
- **strokeWidth** (number) - Optional - Customizes stroke width for stroke-based icons.
- **extraProperties** (Object) - Optional - An object containing additional CSS properties to apply.

### Request Example
```typescript
// tailwind.config.ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  plugins: [
    iconsPlugin({
      // Specify which icon collections to include
      collections: getIconCollections(['mdi', 'lucide', 'heroicons']),
      // Optional: customize the class prefix (default: 'i')
      prefix: 'i',
      // Optional: scale relative to font size (default: 1)
      scale: 1.2,
      // Optional: customize stroke width for stroke-based icons
      strokeWidth: 2,
      // Optional: add extra CSS properties
      extraProperties: {
        'vertical-align': 'middle',
      },
    }),
  ],
} satisfies Config
```

### Usage
```html
<span class="i-mdi-home"></span>
<span class="i-lucide-settings"></span>
<span class="i-heroicons-archive-box"></span>
```

### CSS @apply Usage
```css
.icon-home {
  @apply i-mdi-home;
}
```
```

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

### Configure Tailwind CSS for Dynamic Icons

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Add `iconsPlugin()` and `dynamicIconsPlugin()` to your Tailwind CSS configuration to enable dynamic icon generation. This allows for using any icon from `@iconify/json`.

```typescript
import { dynamicIconsPlugin, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  plugins: [iconsPlugin(), dynamicIconsPlugin()],
} satisfies Config
```

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

### Configure iconsPlugin in Tailwind CSS

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Register icon collections with TailwindCSS to generate CSS utility classes. Customize class prefix, scaling, stroke width, and add extra CSS properties.

```typescript
// tailwind.config.ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  plugins: [
    iconsPlugin({
      // Specify which icon collections to include
      collections: getIconCollections(['mdi', 'lucide', 'heroicons']),
      // Optional: customize the class prefix (default: 'i')
      prefix: 'i',
      // Optional: scale relative to font size (default: 1)
      scale: 1.2,
      // Optional: customize stroke width for stroke-based icons
      strokeWidth: 2,
      // Optional: add extra CSS properties
      extraProperties: {
        'vertical-align': 'middle',
      },
    }),
  ],
} satisfies Config

// Usage in HTML:
// <span class="i-mdi-home"></span>
// <span class="i-lucide-settings"></span>
// <span class="i-heroicons-archive-box"></span>

// Usage with @apply in CSS:
// .icon-home {
//   @apply i-mdi-home;
// }
```

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

### Configure Tailwind CSS v4 Plugin

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Add the @egoist/tailwindcss-icons plugin to your Tailwind CSS v4 configuration. Options can be passed directly to the plugin.

```css
@plugin '@egoist/tailwindcss-icons';

/* pass options to the plugin */
@plugin '@egoist/tailwindcss-icons' {
  scale: 1.5;
}
```

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

### Define Custom Icons in Tailwind Config

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Configure custom icons directly within your tailwind.config.ts file by providing SVG body, width, and height.

```ts
import { iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  plugins: [
    iconsPlugin({
      collections: {
        foo: {
          icons: {
            'arrow-left': {
              // svg body
              body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
              // svg width and height, optional
              width: 24,
              height: 24,
            },
          },
        },
      },
    }),
  ],
} satisfies Config
```

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

### Configure Tailwind CSS with JS Config

Source: https://github.com/hyoban/tailwindcss-icons/blob/main/README.md

Configure the Tailwind CSS plugin within your tailwind.config.ts file. Ensure you import necessary functions and types.

```ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections: getIconCollections(['mdi', 'lucide']),
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    }),
  ],
} satisfies Config
```

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

### Define Custom Icon Collections

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Define your own icon collections using SVG body data in `tailwind.config.ts`. This allows custom icons to be used with the same utility class pattern. You can also mix custom collections with Iconify collections.

```typescript
// tailwind.config.ts
import { iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  plugins: [
    iconsPlugin({
      collections: {
        // Custom collection named 'custom'
        custom: {
          icons: {
            'arrow-left': {
              body: '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>',
              width: 24,
              height: 24,
            },
            'arrow-right': {
              body: '<path d="M14 5l7 7m0 0l-7 7m7-7H3"/>',
              width: 24,
              height: 24,
            },
            'spinner': {
              body: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"><animate attributeName="stroke-dasharray" values="0 63;63 0" dur="1s" repeatCount="indefinite"/></circle>',
              width: 24,
              height: 24,
            },
          },
        },
        // Mix with Iconify collections
        ...getIconCollections(['mdi'])
      },
    }),
  ],
} satisfies Config

// Usage:
// <span class="i-custom-arrow-left"></span>
// <span class="i-custom-arrow-right"></span>
// <span class="i-custom-spinner"></span>
```

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

### Rename Icon Collection Prefixes

Source: https://context7.com/hyoban/tailwindcss-icons/llms.txt

Rename icon collection prefixes for shorter or more intuitive class names using the `collectionNamesAlias` option in `tailwind.config.ts`. This simplifies class names for frequently used collections.

```typescript
// tailwind.config.ts
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import type { Config } from 'tailwindcss'

export default {
  plugins: [
    iconsPlugin({
      collections: getIconCollections(['heroicons', 'material-design-icons']),
      collectionNamesAlias: {
        heroicons: 'hero',
        'material-design-icons': 'md',
      },
    }),
  ],
} satisfies Config

// Before alias: <span class="i-heroicons-archive-box"></span>
// After alias:  <span class="i-hero-archive-box"></span>

// Before alias: <span class="i-material-design-icons-home"></span>
// After alias:  <span class="i-md-home"></span>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.