# VariantIcon

The VariantIcon component displays an icon in different variant colors, such as danger or success. It adapts the appearance of the icon based on its current variants, ensuring that users receive clear visual feedback.

## Overview

```tsx
import { VariantIcon } from 'welcome-ui/VariantIcon'

const Example = () => {
  return (
    <>
      <VariantIcon variant="ai" />
      <VariantIcon variant="danger" />
      <VariantIcon variant="info" />
      <VariantIcon variant="success" />
      <VariantIcon variant="warning" />
    </>
  )
}

export default Example
```

## Examples

### Variants

Use `ai`, `warning`, `danger`, `info` or `success` properties.

```tsx
import { VariantIcon } from 'welcome-ui/VariantIcon'

const Example = () => {
  return (
    <>
      <VariantIcon variant="ai" />
      <VariantIcon variant="danger" />
      <VariantIcon variant="info" />
      <VariantIcon variant="success" />
      <VariantIcon variant="warning" />
    </>
  )
}

export default Example
```

### Sizes

Use size property with `xs`, `sm`, `md` (default), `lg`, `xl` or `xxl`.

```tsx
import { VariantIcon } from 'welcome-ui/VariantIcon'

const Example = () => {
  return (
    <>
      <VariantIcon size="xs" variant="success" />
      <VariantIcon size="sm" variant="success" />
      <VariantIcon variant="success" />
      <VariantIcon size="lg" variant="success" />
      <VariantIcon size="xl" variant="success" />
      <VariantIcon size="xxl" variant="success" />
    </>
  )
}

export default Example
```

## Props

### VariantIcon

```tsx
interface VariantIconProps {
  /** Default: md */
  size?: '2xl' | '3xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl'
  variant?: 'ai' | 'danger' | 'info' | 'success' | 'warning'
}
```