### Install Heroicons Vue

Source: https://github.com/tailwindlabs/heroicons/blob/master/vue/README.md

Install the @heroicons/vue package using npm. This is the first step before using any icons in your Vue project.

```sh
npm install @heroicons/vue
```

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

### Basic Vue Icon with Script Setup

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Demonstrates basic usage of a Vue Icon component within a `<script setup>` block. Ensure the icon is imported from the appropriate Heroicons package.

```vue
<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>Hello World</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### Install and Use Heroicons in React

Source: https://github.com/tailwindlabs/heroicons/blob/master/README.md

Install the @heroicons/react package via npm. Import icons individually as React components. Icons are suffixed with 'Icon' and use upper camel case naming.

```sh
npm install @heroicons/react
```

```javascript
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="size-6 text-blue-500" />
      <p>...</p>
    </div>
  )
}
```

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

### Individual Icon Import Examples

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Demonstrates importing individual icons using wildcard patterns in both ESM and CommonJS environments.

```javascript
// All three resolve to the same ESM component
import { BeakerIcon } from '@heroicons/react/24/solid'
import BeakerIcon from '@heroicons/react/24/solid/BeakerIcon'
import BeakerIcon from '@heroicons/react/24/solid/esm/BeakerIcon.js'

// CommonJS
const { BeakerIcon } = require('@heroicons/react/24/solid')
const BeakerIcon = require('@heroicons/react/24/solid/BeakerIcon.js')
```

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

### Basic Vue Setup with Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Import and use a Heroicon component directly within your Vue template. Ensure the icon is imported in the script setup.

```vue
<template>
  <div class="flex items-center gap-2">
    <BeakerIcon class="size-6 text-blue-500" />
    <p>Science Lab</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### Install React Package with pnpm

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Install the Heroicons React package using pnpm. Requires Node.js 12+ and React 16.x or 19.x.

```bash
pnpm add @heroicons/react
```

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

### Install React Package with yarn

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Install the Heroicons React package using yarn. Requires Node.js 12+ and React 16.x or 19.x.

```bash
yarn add @heroicons/react
```

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

### React Package Structure Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Illustrates the directory layout of the built React package, showing different icon sizes, styles, and export formats.

```treeview
react/
├── 16/solid/
│   ├── esm/
│   │   ├── AcademicCapIcon.js
│   │   ├── ArrowDownIcon.js
│   │   ├── ... (all 316 icons)
│   │   ├── index.js
│   │   └── package.json
│   ├── AcademicCapIcon.js
│   ├── AcademicCapIcon.d.ts
│   ├── ArrowDownIcon.js
│   ├── ArrowDownIcon.d.ts
│   ├── ... (all 316 icons)
│   ├── index.js
│   ├── index.d.ts
│   └── package.json
├── 20/solid/         # 324 icons (same structure)
├── 24/
│   ├── outline/      # 324 icons (same structure)
│   └── solid/        # 324 icons (same structure)
├── outline/          # v1 compatibility proxy
│   └── index.js      # Throws deprecation error
├── solid/            # v1 compatibility proxy
│   └── index.js      # Throws deprecation error
├── index.js          # CJS proxy (error message)
├── index.esm.js      # ESM proxy (error message)
├── package.json      # Auto-generated exports field
├── README.md
└── LICENSE
```

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

### Install Heroicons React Package

Source: https://github.com/tailwindlabs/heroicons/blob/master/react/README.md

Install the official Heroicons React package using npm. This command is required before you can import icons into your project.

```sh
npm install @heroicons/react
```

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

### Package.json Exports Field Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

An example of the 'exports' field in package.json, defining entry points for different formats and styles.

```json
{
  ".": {
    "import": "./index.esm.js",
    "require": "./index.js"
  },
  "./24/solid": {
    "types": "./24/solid/index.d.ts",
    "import": "./24/solid/esm/index.js",
    "require": "./24/solid/index.js"
  },
  "./24/solid/*": {
    "types": "./24/solid/*.d.ts",
    "import": "./24/solid/esm/*.js",
    "require": "./24/solid/*.js"
  }
}
```

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

### Install Vue Package with pnpm

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Install the Heroicons Vue package using pnpm. Requires Node.js 12+ and Vue 3.x.

```bash
pnpm add @heroicons/vue
```

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

### Basic React Setup with Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Demonstrates basic integration of a Heroicon component in a React application. Ensure React 16.x or 19.x and a bundler with ES module support are set up.

```javascript
import React from 'react'
import { BeakerIcon } from '@heroicons/react/24/solid'

function App() {
  return (
    <div className="flex items-center gap-2">
      <BeakerIcon className="size-6 text-blue-500" />
      <p>Science Lab</p>
    </div>
  )
}

export default App
```

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

### Install Vue Package with yarn

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Install the Heroicons Vue package using yarn. Requires Node.js 12+ and Vue 3.x.

```bash
yarn add @heroicons/vue
```

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

### Nuxt.js Basic Setup

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Set up Heroicons in a basic Nuxt.js application. Import the icon component and use it within your Vue template.

```vue
<!-- app.vue -->
<template>
  <div class="flex items-center gap-2">
    <BeakerIcon class="size-6 text-blue-500" />
    <h1>Welcome to Science Lab</h1>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### Install and Use Heroicons in Vue

Source: https://github.com/tailwindlabs/heroicons/blob/master/README.md

Install the @heroicons/vue package via npm. Import icons individually as Vue components. Icons are suffixed with 'Icon' and use upper camel case naming.

```sh
npm install @heroicons/vue
```

```vue
<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### Register Icons Globally in Vue

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Provides an example of how to register all icons from a directory globally as Vue components.

```javascript
import { createApp } from 'vue'
import * as HeroiconsOutline from '@heroicons/vue/24/outline'

const app = createApp(App)

Object.entries(HeroiconsOutline).forEach(([name, component]) => {
  app.component(name, component)
})
```

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

### Vue with TypeScript and Multiple Icons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Use TypeScript in your Vue setup to import and display multiple Heroicons. This example shows importing two icons and using them in the template.

```vue
<template>
  <div class="flex items-center gap-4">
    <BeakerIcon class="size-6 text-blue-500" />
    <ArrowDownIcon class="size-4 text-gray-600" />
  </div>
</template>

<script setup lang="ts">
import { BeakerIcon, ArrowDownIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### TypeScript Type Resolution Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Illustrates how TypeScript automatically resolves type definitions for icons, using BeakerIcon as an example.

```typescript
// TypeScript automatically finds ./24/solid/index.d.ts
import { BeakerIcon } from '@heroicons/react/24/solid'

type IconProps = typeof BeakerIcon extends React.ForwardRefExoticComponent<infer P>
  ? P
  : never
```

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

### Next.js Basic Setup with App Router

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Integrate Heroicons into a basic Next.js application using the App Router. Import and render the icon component directly in your page.

```typescript
// app/page.tsx
import { BeakerIcon } from '@heroicons/react/24/solid'

export default function Home() {
  return (
    <div className="flex items-center gap-2">
      <BeakerIcon className="size-6 text-blue-500" />
      <h1>Welcome to Science Lab</h1>
    </div>
  )
}
```

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

### React Package - V1 Compatibility Proxy

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

This proxy file is used for V1 import paths in '@heroicons/react'. It throws an error if V1 icons are accessed after installing V2, guiding users to install '@heroicons/react@v1' if needed.

```javascript
// @heroicons/react/outline/index.js
module.exports = new Proxy({}, {
  get: (obj, property) => {
    if (property === '__esModule') return {}
    throw new Error(
      `You're trying to import '@heroicons/react/outline/${property}' from ` +
      `Heroicons v1 but have installed Heroicons v2. Install '@heroicons/react@v1' ` +
      `to resolve this error.`
    )
  }
})
```

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

### Barrel Import Example with ESM

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Demonstrates how to import multiple icons using barrel imports from the ESM index file. This is typically used in frontend projects.

```javascript
import { BeakerIcon, ArrowDownIcon } from '@heroicons/react/24/solid'
```

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

### 16x16 Solid Icon Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Best for micro icons, badges, inline icons, and other small UI elements. The fill color is user-configurable.

```xml
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#0F172A"/>
</svg>
```

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

### Tree-shaking Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Illustrates how tree-shaking removes unused icon imports. Only the imported and used icon remains after the bundling process, significantly reducing the bundle size.

```javascript
// Input
import { BeakerIcon, ArrowDownIcon, CheckIcon } from '@heroicons/react/24/solid'
const icon = BeakerIcon  // Only this used

// After tree-shaking
const BeakerIcon = require('./BeakerIcon.js')
// ArrowDownIcon and CheckIcon removed
```

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

### Next.js Basic Setup with Pages Router

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Integrate Heroicons into a basic Next.js application using the Pages Router. Ensure the icon component is imported and used within your JSX.

```typescript
// pages/index.tsx
import { BeakerIcon } from '@heroicons/react/24/solid'

export default function Home() {
  return (
    <div className="flex items-center gap-2">
      <BeakerIcon className="size-6 text-blue-500" />
      <h1>Welcome to Science Lab</h1>
    </div>
  )
}
```

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

### Nuxt.js Auto-import Usage Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Demonstrates how to use the HeroIcon wrapper component in a Nuxt.js application after setting up auto-import. Pass the desired icon and any custom classes.

```vue
<template>
  <HeroIcon :icon="BeakerIcon" class="size-8 text-blue-500" />
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

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

### React Icon Tuple Usage Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Demonstrates how to create a type for individual icons from a React icon set, specifically for the 24/solid collection. Imports all icons from the specified module.

```typescript
import * as Icons24Solid from '@heroicons/react/24/solid'

type Icon24Solid = typeof Icons24Solid[keyof typeof Icons24Solid]
```

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

### Next.js with Server Components

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Utilize Heroicons within Next.js Server Components. This example demonstrates creating a dedicated icon component and using it in a page.

```typescript
// app/components/IconDisplay.tsx
import { BeakerIcon } from '@heroicons/react/24/solid'

export default function IconDisplay() {
  return (
    <BeakerIcon className="size-6 text-blue-500" />
  )
}

// app/page.tsx
import IconDisplay from './components/IconDisplay'

export default function Home() {
  return (
    <div className="flex items-center gap-2">
      <IconDisplay />
      <h1>Science Lab</h1>
    </div>
  )
}
```

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

### 24x24 Solid Icon Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Ideal for solid badges, filled buttons, and feature highlights. The fill color is user-configurable.

```xml
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#0F172A"/>
</svg>
```

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

### 20x20 Solid Icon Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Suitable for compact UI elements such as table icons, sidebar icons, and navigation. The fill color is user-configurable.

```xml
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="#0F172A"/>
</svg>
```

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

### Vue Icon Tuple Usage Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Demonstrates how to create a type for individual icons from a Vue icon set, specifically for the 24/solid collection. Imports all icons from the specified module.

```typescript
import * as Icons24Solid from '@heroicons/vue/24/solid'

type Icon24Solid = typeof Icons24Solid[keyof typeof Icons24Solid]
```

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

### 24x24 Outline Icon Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Use this configuration for general UI elements, buttons, headers, dialogs, and detailed illustrations. The stroke is user-configurable.

```xml
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

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

### Example React Icon Component Implementation

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Illustrates how a specific icon component like BeakerIcon is declared using the IconComponent type. This is typically how icon components are exported from the library.

```typescript
import * as React from 'react'

declare const BeakerIcon: React.ForwardRefExoticComponent<
  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
    title?: string
    titleId?: string
  } & React.RefAttributes<SVGSVGElement>
>

export default BeakerIcon
```

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

### Vue Icon Component Example Implementation

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Illustrates how a Vue icon component like BeakerIcon is declared using the IconComponent type. Requires importing necessary types from 'vue'.

```typescript
import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue'

declare const BeakerIcon: FunctionalComponent<HTMLAttributes & VNodeProps>

export default BeakerIcon
```

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

### Usage of Custom Vue Button with Icon

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Demonstrates how to use the custom Vue button component, passing an icon component and handling a click event. This example assumes the custom button is in './MyButton.vue'.

```vue
<template>
  <MyButton :icon="ArrowRightIcon" @click="handleClick">
    Next
  </MyButton>
</template>

<script setup>
import { ArrowRightIcon } from '@heroicons/vue/24/solid'
import MyButton from './MyButton.vue'
</script>
```

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

### Run Main Build Command

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Executes the primary build command to generate all icon formats and frameworks.

```bash
npm run build
```

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

### main(package)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Orchestrates the entire build process for a specified package, including cleaning directories, building icons, and updating package.json.

```APIDOC
## Function: `main(package)`

### Description
Orchestrates the complete build process for a package.

### Signature
```javascript
async function main(package)
```

### Parameters
- `package` (string): Either `react` or `vue`

### Process
1. Cleans directories
2. Builds icons in all formats (ESM and CJS) for all styles:
   - `16/solid`
   - `20/solid`
   - `24/outline`
   - `24/solid`
3. Creates package.json files in each directory
4. Updates main package.json with exports field
```

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

### Build Process Module Flow Diagram

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Visualizes the steps involved in the Heroicons build process, from raw SVG sources to published packages.

```text
SVG Sources
    ↓
SVGO Optimization
    ↓
Optimized SVG Files
    ↓ (read by build.js:getIcons())
Build Transformers
    ├── React Transformer (@svgr/core + Babel)
    └── Vue Transformer (@vue/compiler-dom)
    ↓
Framework Components
    ├── ESM (.js files)
    ├── CJS (.js files)
    └── Types (.d.ts files)
    ↓
Index/Barrel Files
    ├── index.js
    ├── index.esm.js
    └── index.d.ts
    ↓
Package.json (with exports)
    ↓
Published Packages
```

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

### Execute Build Script for Package

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Runs the main build script for a specific package, either 'react' or 'vue'.

```bash
node ./scripts/build.js <package>
```

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

### Basic React Icon Usage

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Demonstrates how to import and render a solid icon component in a React component. Ensure the icon is imported from the correct path.

```javascript
import { BeakerIcon } from '@heroicons/react/24/solid'

export function MyComponent() {
  return (
    <div>
      <BeakerIcon className="size-6 text-blue-500" />
      <p>Hello World</p>
    </div>
  )
}
```

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

### Vue Icon Type Definition Output

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Example of a generated TypeScript type definition for a Vue icon component.

```typescript
import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';
declare const BeakerIcon: FunctionalComponent<HTMLAttributes & VNodeProps>;
export default BeakerIcon;
```

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

### React Icon Type Definition Output

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Example of a generated TypeScript type definition for a React icon component.

```typescript
import * as React from 'react';
declare const BeakerIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string } & React.RefAttributes<SVGSVGElement>>;
export default BeakerIcon;
```

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

### Import All Icons from a Directory in Vue

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Illustrates how to import all icons from a specific size/style directory using barrel imports and how to use them in templates.

```javascript
import * as HeroiconsOutline from '@heroicons/vue/24/outline'
import * as HeroiconsSolid from '@heroicons/vue/24/solid'

// In templates, use with component tag
const CheckIcon = HeroiconsOutline.CheckIcon
const ArrowIcon = HeroiconsSolid.ArrowDownIcon
```

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

### React Package - Import 24x24 Outline Icons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Demonstrates various ways to import 24x24 outline icons from the '@heroicons/react' package, including barrel, named, and direct file imports.

```javascript
// Barrel import (all icons)
import * as Outline24 from '@heroicons/react/24/outline'

// Named import (individual icon)
import { BeakerIcon } from '@heroicons/react/24/outline'

// Direct file import (ESM)
import BeakerIcon from '@heroicons/react/24/outline/esm/BeakerIcon.js'

// Direct file import (CJS)
const BeakerIcon = require('@heroicons/react/24/outline/BeakerIcon.js')
```

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

### SVGO Dependencies Flow Diagram

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Illustrates the dependency flow for the SVGO optimization process, showing input, configuration, library, and output stages.

```text
Input: src/{size}/{style}/*.svg
↓
SVGO Config (svgo.*.mjs)
↓
SVGO Library
↓
Output: optimized/{size}/{style}/*.svg
↓
Copy to: {size}/{style}/*.svg
```

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

### Optimizing SVG Icons with SVGO (20px Solid)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

This command optimizes 20px solid icons using a specific SVGO configuration, outputting them to a designated directory.

```bash
svgo --config=svgo.20.solid.mjs -f ./src/20/solid -o ./optimized/20/solid
```

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

### CJS BeakerIcon Component

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

An example of a CommonJS (CJS) component in Heroicons. It uses 'require()' statements and 'module.exports' for module handling, while still supporting tree-shaking.

```javascript
const React = require("react")

const BeakerIcon = /*#__PURE__*/ React.forwardRef(({ title, ...props }, ref) => (
  <svg {...props} ref={ref}>
    {/* ... */}
  </svg>
))

module.exports = BeakerIcon
```

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

### Package.json Exports for Package Root Entry Points

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Defines the main entry points for the package at the root level. Importing from the package root will typically throw an error directing users to more specific imports.

```json
// package.json exports["."]
{
  "import": "./index.esm.js",
  "require": "./index.js"
}
```

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

### React Package Root Exports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

The root export of '@heroicons/react' is intentionally designed to throw an error, guiding users to import from specific size and style paths.

```json
{
  ".": {
    "import": "./index.esm.js",
    "require": "./index.js"
  },
  "./package.json": {
    "default": "./package.json"
  }
}
```

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

### Vue with Conditional Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Dynamically render different Heroicons based on a status prop using computed properties and a mapping. This example uses TypeScript for type safety.

```vue
<template>
  <component
    :is="iconComponent"
    :class="['size-6', statusColorMap[status]]"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import * as Icons from '@heroicons/vue/24/solid'

type Status = 'success' | 'error' | 'pending'

interface Props {
  status: Status
}

const props = defineProps<Props>()

const iconMap: Record<Status, any> = {
  success: Icons.CheckCircleIcon,
  error: Icons.ExclamationCircleIcon,
  pending: Icons.ClockIcon,
}

const statusColorMap: Record<Status, string> = {
  success: 'text-green-600',
  error: 'text-red-600',
  pending: 'text-yellow-600',
}

const iconComponent = computed(() => iconMap[props.status])
</script>
```

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

### Optimizing SVG Icons with SVGO (24px Solid)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

This command optimizes 24px solid icons using a specific SVGO configuration, outputting them to a designated directory.

```bash
svgo --config=svgo.24.solid.mjs -f ./src/24/solid -o ./optimized/24/solid
```

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

### NPM Scripts for Build Process

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

Define NPM scripts for managing the build, linting, and publishing workflows. Includes pre-build cleanup, main build orchestration, and specific build commands for React and Vue components.

```json
{
  "scripts": {
    "prepublishOnly": "npm run build",
    "lint": "node ./scripts/verify-names.js",
    "prebuild": "rimraf ./{16,20,24} ./{vue,react}/{16,20,24} ./optimized/{16,20,24}",
    "build": "npm run build-24-outline && npm run build-20-solid && npm run build-24-solid && npm run build-16-solid && npm run build-react && npm run build-vue",
    "build-react": "node ./scripts/build.js react",
    "build-vue": "node ./scripts/build.js vue"
  }
}
```

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

### Optimizing SVG Icons with SVGO (16px Solid)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

This command optimizes 16px solid icons using a specific SVGO configuration, outputting them to a designated directory.

```bash
svgo --config=svgo.16.solid.mjs -f ./src/16/solid -o ./optimized/16/solid
```

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

### Dynamically Load React Icon by Name

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Import and render a specific Heroicon component dynamically based on its name. Ensure the correct path and style are used.

```javascript
// React
const iconName = 'BeakerIcon'
const Icon = require(`@heroicons/react/24/solid`)[iconName]

return <Icon className="size-6" />
```

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

### SVG Path Element Example

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Shows a typical SVG path element with its 'd' attribute containing path data and fill color. Used to define the shape of icons.

```xml
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="#0F172A"/>
```

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

### Optimizing SVG Icons with SVGO (24px Outline)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

This command optimizes 24px outline icons using a specific SVGO configuration, outputting them to a designated directory.

```bash
svgo --config=svgo.24.outline.mjs -f ./src/24/outline -o ./optimized/24/outline
```

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

### Icon Component Usage

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Demonstrates how to import and use individual Heroicon components from the @heroicons/react package. Icons can be imported directly from specific size and style entry points.

```APIDOC
## Import Paths

Icons are organized by size and style. Import individual icons directly from the size/style directory:

```javascript
import { AcademicCapIcon } from '@heroicons/react/24/solid'
import { ArrowDownIcon } from '@heroicons/react/24/outline'
import { BeakerIcon } from '@heroicons/react/20/solid'
import { CheckIcon } from '@heroicons/react/16/solid'
```

### Available Entry Points

| Entry Point |
|-------------| 
| `@heroicons/react/24/outline` |
| `@heroicons/react/24/solid` |
| `@heroicons/react/20/solid` |
| `@heroicons/react/16/solid` |
```

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

### Module Exports for Icons (24/solid/index.js)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Shows how the index file re-exports all icons from a specific size and style directory.

```javascript
// 24/solid/index.js
export { default as AcademicCapIcon } from './AcademicCapIcon.js'
export { default as ArrowDownIcon } from './ArrowDownIcon.js'
// ... all 324 icons
```

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

### Get Icon Data from Optimized SVGs

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Reads SVG files from an optimized directory and returns icon data including SVG content, component name, and deprecation status.

```javascript
async function getIcons(style)

// Parameters:
// - style (string): Path to icon directory, e.g., `24/outline`, `20/solid`

// Returns:
// Promise<Array<{ svg: string, componentName: string, isDeprecated: boolean }>>
```

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

### ESM BeakerIcon Component

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

An example of an ES Module (ESM) component in Heroicons. It uses 'import' statements and 'export default' for module handling, and includes a pure component annotation for tree-shaking.

```javascript
import * as React from "react"

const BeakerIcon = /*#__PURE__*/ React.forwardRef(({ title, ...props }, ref) => (
  <svg {...props} ref={ref}>
    {/* ... */}
  </svg>
))

export default BeakerIcon
```

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

### package.json for @heroicons/react

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

This JSON file defines the metadata and configuration for the @heroicons/react npm package. It specifies package name, license, version, description, keywords, repository details, files to be published, side effects for tree-shaking, module resolution rules via exports, publish configuration, and peer dependencies.

```json
{
  "name": "@heroicons/react",
  "license": "MIT",
  "version": "2.2.0",
  "description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
  "keywords": ["icons", "svg", "react", "tailwindcss"],
  "homepage": "https://github.com/tailwindlabs/heroicons#readme",
  "repository": {
    "type": "git",
    "url": "https://github.com/tailwindlabs/heroicons.git"
  },
  "files": [
    "16", "20", "24",
    "outline", "solid",
    "index.esm.js", "index.js",
    "LICENSE", "README.md"
  ],
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./index.esm.js",
      "require": "./index.js"
    },
    "./24/solid": {
      "types": "./24/solid/index.d.ts",
      "import": "./24/solid/esm/index.js",
      "require": "./24/solid/index.js"
    }
    // ... more exports for other sizes/styles
  },
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "react": ">= 16 || ^19.0.0-rc"
  }
}
```

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

### React Package - Import from Root (Error)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Attempting to import directly from the root of '@heroicons/react' will result in an error, prompting the user to use specific icon paths.

```javascript
// Not recommended - throws error with helpful message
import from '@heroicons/react'
```

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

### Vue Component Wrapper for Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Create a reusable Vue component to wrap Heroicon components, allowing dynamic control over size, color, and CSS classes. This setup uses TypeScript interfaces for props.

```vue
<template>
  <component
    :is="icon"
    :class="[sizeClasses[size], className]"
    :style="{ color }"
  />
</template>

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

interface Props {
  icon: any
  size?: 'sm' | 'md' | 'lg'
  color?: string
  className?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  color: 'currentColor',
  className: '',
})

const sizeClasses = {
  sm: 'size-4',
  md: 'size-6',
  lg: 'size-8',
}
</script>
```

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

### ES Module and CommonJS Imports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Demonstrates how to import icons using both ES Module syntax and CommonJS syntax, depending on your project's module system.

```javascript
// ES Module
import { CheckIcon } from '@heroicons/react/24/solid'
```

```javascript
// CommonJS
const { CheckIcon } = require('@heroicons/react/24/solid')
```

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

### Responsive Sizing for React Icons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Demonstrates how to apply responsive sizing classes to an icon component using Tailwind CSS. This allows the icon to adapt to different screen sizes.

```javascript
import { HeartIcon } from '@heroicons/react/24/solid'

export function ResponsiveIcon() {
  return (
    <HeartIcon className="size-4 md:size-6 lg:size-8 text-red-500" />
  )
}
```

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

### MIT License

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Include this license file in your project when using Heroicons.

```text
MIT License

Copyright (c) 2020 Tailwind Labs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...
```

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

### List All Icons in a Category

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/icon-catalog.md

Use this to list all available icons within a specific category. Requires importing the entire category as an object.

```javascript
import * as Solid24 from '@heroicons/react/24/solid'
console.log(Object.keys(Solid24))
```

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

### Dynamic React Icon Selection

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Shows how to dynamically select and render an icon component based on a string name. Ensure the icon name matches the available components in the imported module.

```javascript
import * as HeroiconsOutline from '@heroicons/react/24/outline'

export function DynamicIconRenderer({ iconName, size = 'size-6' }) {
  const IconComponent = HeroiconsOutline[`${iconName}Icon`]
  
  if (!IconComponent) {
    return null
  }
  
  return <IconComponent className={size} />
}
```

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

### Optimize SVGs and Copy Files

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Optimizes SVG files and copies them to their respective output directories for different icon sizes and styles.

```bash
npm run build-24-outline
npm run build-20-solid
npm run build-24-solid
npm run build-16-solid
```

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

### Package.json Exports for Size/Style Entry Points

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Defines conditional exports for specific size and style packages within the main package. This allows tools to resolve the correct entry point based on the import type (e.g., ESM or CJS).

```json
// package.json exports["./24/solid"]
{
  "types": "./24/solid/index.d.ts",
  "import": "./24/solid/esm/index.js",
  "require": "./24/solid/index.js"
}
```

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

### Vue Package.json Configuration

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

Configuration for the @heroicons/vue package, specifying name, version, files, exports, and peer dependencies.

```json
{
  "name": "@heroicons/vue",
  "license": "MIT",
  "version": "2.2.0",
  "description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
  "keywords": ["icons", "svg", "vue", "tailwindcss"],
  "homepage": "https://github.com/tailwindlabs/heroicons#readme",
  "repository": {
    "type": "git",
    "url": "https://github.com/tailwindlabs/heroicons.git"
  },
  "files": [
    "16", "20", "24",
    "outline", "solid",
    "index.esm.js", "index.js",
    "LICENSE", "README.md"
  ],
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./index.esm.js",
      "require": "./index.js"
    },
    "./24/solid": {
      "types": "./24/solid/index.d.ts",
      "import": "./24/solid/esm/index.js",
      "require": "./24/solid/index.js"
    },
    "// ... more exports for other sizes/styles"
  },
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "vue": ">= 3"
  }
}
```

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

### Vue Icon with Classic Script Syntax

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Demonstrates using Vue Icons with the classic Vue 2 script syntax, including registering the component in the `components` option. This approach is suitable for older Vue projects or specific architectural choices.

```vue
<template>
  <div>
    <SparklesIcon :class="iconClass" />
  </div>
</template>

<script>
import { SparklesIcon } from '@heroicons/vue/24/solid'

export default {
  components: {
    SparklesIcon
  },
  data() {
    return {
      iconClass: 'size-6 text-yellow-500'
    }
  }
}
</script>
```

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

### Root package.json Configuration

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

The main package.json file for the Heroicons project defines metadata, build scripts, and development dependencies. It specifies how the package is structured and built.

```json
{
  "name": "heroicons",
  "license": "MIT",
  "version": "2.2.0",
  "description": "A set of free MIT-licensed high-quality SVG icons for UI development.",
  "keywords": ["icons", "svg", "tailwindcss"],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tailwindlabs/heroicons.git"
  },
  "files": [
    "16/",
    "20/",
    "24/",
    "README.md",
    "LICENSE"
  ],
  "scripts": {
    "prepublishOnly": "npm run build",
    "lint": "node ./scripts/verify-names.js",
    "prebuild": "rimraf ./{16,20,24} ./{vue,react}/{16,20,24} ./optimized/{16,20,24}",
    "build": "npm run build-24-outline && npm run build-20-solid && npm run build-24-solid && npm run build-16-solid && npm run build-react && npm run build-vue",
    "build-react": "node ./scripts/build.js react",
    "build-vue": "node ./scripts/build.js vue",
    "build-24-outline": "rimraf ./24/outline ./optimized/24/outline && svgo --config=svgo.24.outline.mjs -f ./src/24/outline -o ./optimized/24/outline --pretty --indent=2 && mkdir -p ./24 && cp -R ./optimized/24/outline ./24/outline",
    "build-16-solid": "rimraf ./16/solid ./optimized/16/solid && svgo --config=svgo.16.solid.mjs -f ./src/16/solid -o ./optimized/16/solid --pretty --indent=2 && mkdir -p ./16 && cp -R ./optimized/16/solid ./16/solid",
    "build-20-solid": "rimraf ./20/solid ./optimized/20/solid && svgo --config=svgo.20.solid.mjs -f ./src/20/solid -o ./optimized/20/solid --pretty --indent=2 && mkdir -p ./20 && cp -R ./optimized/20/solid ./20/solid",
    "build-24-solid": "rimraf ./24/solid ./optimized/24/solid && svgo --config=svgo.24.solid.mjs -f ./src/24/solid -o ./optimized/24/solid --pretty --indent=2 && mkdir -p ./24 && cp -R ./optimized/24/solid ./24/solid",
    "release-channel": "node ./scripts/release-channel.js",
    "release-notes": "node ./scripts/release-notes.js"
  },
  "devDependencies": {
    "@babel/core": "^7.27.3",
    "@babel/plugin-transform-react-jsx": "^7.27.1",
    "@svgr/core": "^5.5.0",
    "@vue/compiler-dom": "^3.0.5",
    "camelcase": "^6.0.0",
    "prettier": "^2.8.7",
    "rimraf": "^3.0.2",
    "svgo": "^3.0.2"
  }
}
```

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

### SVG Namespace and Basic Structure

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Illustrates the basic SVG structure with the namespace and viewBox attribute. This is the foundation for all SVG icons.

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ...>
  ...
</svg>
```

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

### buildIcons(package, style, format)

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

The main function for generating framework-specific icon component files. It reads SVGs, transforms them, and creates JavaScript and TypeScript definition files.

```APIDOC
## Function: `buildIcons(package, style, format)`

### Description
Main function that generates component files for a given style and format.

### Signature
```javascript
async function buildIcons(package, style, format)
```

### Parameters
- `package` (string): Either `react` or `vue`
- `style` (string): Icon set, e.g., `24/outline`, `20/solid`
- `format` (string): Either `cjs` or `esm`

### Process
1. Reads icons from `./optimized/{style}`
2. Transforms each SVG to framework component
3. Generates `.js` files for each icon component
4. Generates `.d.ts` TypeScript definitions
5. Generates `index.js` barrel export file
6. Generates `index.d.ts` type barrel export

### Output Structure Example
```
react/24/solid/
├── esm/
│   ├── AcademicCapIcon.js
│   ├── ArrowDownIcon.js
│   ├── index.d.ts
│   └── index.js
├── AcademicCapIcon.d.ts
├── AcademicCapIcon.js
├── ArrowDownIcon.d.ts
├── ArrowDownIcon.js
├── index.d.ts
├── index.js
└── package.json
```
```

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

### Responsive SVG Implementation

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/svg-icons.md

Implement responsive SVG icons by setting width and height attributes, allowing them to scale with the layout.

```html
<svg 
  viewBox="0 0 24 24"
  style="width: 100%; height: auto; max-width: 24px;"
>
  <path d="..."/>
</svg>
```

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

### Vite Configuration for Module Resolution

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

Configures Vite to include common file extensions for module resolution, ensuring proper import of Heroicons and other modules.

```javascript
// vite.config.js
export default {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.d.ts'],
  }
}
```

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

### Generate React and Vue Components

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Generates framework-specific icon components from the optimized SVG files.

```bash
npm run build-react
npm run build-vue
```

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

### Build Icons Function

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Orchestrates the generation of framework-specific icon component files for a given style and format.

```javascript
async function buildIcons(package, style, format)
```

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

### Import Individual Icons in React

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/react-icons.md

Import individual icon components directly from their respective size and style directories. Ensure you specify the correct path for the desired icon size and style (e.g., 24x24 outlined, 20x20 solid).

```javascript
import { AcademicCapIcon } from '@heroicons/react/24/solid'
import { ArrowDownIcon } from '@heroicons/react/24/outline'
import { BeakerIcon } from '@heroicons/react/20/solid'
import { CheckIcon } from '@heroicons/react/16/solid'
```

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

### Migrate Heroicons Imports from v1 to v2

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Update your import paths from v1 (e.g., `@heroicons/react/solid`) to v2 (e.g., `@heroicons/react/24/solid`) to use the latest icon versions and avoid migration errors.

```javascript
import { BeakerIcon } from '@heroicons/react/solid'
import { CheckIcon } from '@heroicons/react/outline'
```

```javascript
import { BeakerIcon } from '@heroicons/react/24/solid'
import { CheckIcon } from '@heroicons/react/24/outline'
```

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

### Run Linting Command

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/build-system.md

Command to run the icon name verification script. Ensures icon files adhere to naming conventions.

```bash
npm run lint
```

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

### React Package 20x20 Solid Exports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Defines the export paths for 20x20 solid icons, including types and module formats for both ESM and CJS.

```json
{
  "./20/solid": {
    "types": "./20/solid/index.d.ts",
    "import": "./20/solid/esm/index.js",
    "require": "./20/solid/index.js"
  }
  // ... wildcard patterns same as above
}
```

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

### TypeScript Configuration for Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/types.md

Ensure your tsconfig.json includes these options for proper integration with Heroicons.

```json
{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "lib": ["ES2020", "DOM"]
  }
}
```

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

### Tailwind CSS Opacity Utilities for Heroicons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/integration-guide.md

Manage the opacity of Heroicons with Tailwind CSS utility classes, including hover effects.

```jsx
// Opacity
<BeakerIcon className="opacity-50 hover:opacity-100" />
```

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

### Importing Individual Vue Icons

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/api-reference/vue-icons.md

Import specific icon components directly from their respective size and style directories. This allows for tree-shaking and efficient bundle sizes.

```javascript
import { BeakerIcon } from '@heroicons/vue/24/solid'
import { ArrowDownIcon } from '@heroicons/vue/24/outline'
import { CheckIcon } from '@heroicons/vue/20/solid'
import { HeartIcon } from '@heroicons/vue/16/solid'
```

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

### Prettier Configuration

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/configuration.md

Configure Prettier for code formatting. Use single quotes and omit semicolons for cleaner code. Set the line length limit to 100 characters.

```javascript
module.exports = {
  singleQuote: true,
  semi: false,
  printWidth: 100,
}
```

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

### React Package Backwards Compatibility Exports

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/package-exports.md

Provides V1 import paths for backwards compatibility, redirecting to proxy files that issue deprecation warnings.

```json
{
  "./outline": {
    "default": "./outline/index.js"
  },
  "./outline/index": {
    "default": "./outline/index.js"
  },
  "./outline/index.js": {
    "default": "./outline/index.js"
  },
  "./solid": {
    "default": "./solid/index.js"
  },
  "./solid/index": {
    "default": "./solid/index.js"
  },
  "./solid/index.js": {
    "default": "./solid/index.js"
  }
}
```

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

### Import Multiple Icons with Barrel Index

Source: https://github.com/tailwindlabs/heroicons/blob/master/_autodocs/module-architecture.md

Import multiple icons from the same module using the barrel index. This ensures all icons are loaded from a single file, preventing duplication of common dependencies and enabling effective tree-shaking.

```javascript
import { BeakerIcon, ArrowDownIcon, CheckIcon } from '@heroicons/react/24/solid'
```