# Icon

## Overview

Wrapper around `lucide-react` icons with design-system sizes and convenient color/className support.

---

## Props

| Prop        | Type                                       | Default      | Description                                        |
| ----------- | ------------------------------------------ | ------------ | -------------------------------------------------- | ---- | ----- | ------ | ------------------------------------------- |
| `name`      | `IconName` (key of `lucide-react` exports) | **required** | Icon name from `lucide-react`.                     |
| `size`      | `"xs"                                      | "sm"         | "md"                                               | "lg" | "xl"` | `"md"` | Predefined pixel sizes: 16, 20, 24, 32, 40. |
| `className` | `string`                                   | `""`         | Additional classes (e.g., color via theme tokens). |
| `color`     | `string`                                   | `undefined`  | Overrides color style directly.                    |

Any extra props are passed to the underlying `lucide-react` icon component.

---

## Behavior

- **Sizing**: The `size` prop maps to pixel sizes (`xs=16`, `sm=20`, `md=24`, `lg=32`, `xl=40`).
- **Coloring**: Prefer theme tokens via `className` (e.g., `text-d-destructive`). For one-off colors, use `color`.
- **Safety**: If `name` is not found, the component renders `null` and logs a warning.

---

## Examples

### Default

```tsx
import { Icon } from "laif-ds";

export function DefaultIcon() {
  return <Icon name="Check" size="md" />;
}
```

### Sizes

```tsx
import { Icon } from "laif-ds";

export function IconSizes() {
  return (
    <div className="flex items-end gap-4">
      <div className="flex flex-col items-center gap-2">
        <Icon name="Check" size="xs" />
        <span className="text-xs">xs</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Icon name="Check" size="sm" />
        <span className="text-xs">sm</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Icon name="Check" size="md" />
        <span className="text-xs">md</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Icon name="Check" size="lg" />
        <span className="text-xs">lg</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Icon name="Check" size="xl" />
        <span className="text-xs">xl</span>
      </div>
    </div>
  );
}
```

### Colors

```tsx
import { Icon } from "laif-ds";

export function IconColors() {
  return (
    <div className="flex gap-4">
      <Icon name="Heart" size="lg" className="text-d-destructive" />
      <Icon name="Heart" size="lg" className="text-d-primary" />
      <Icon name="Heart" size="lg" className="text-d-muted-foreground" />
      <Icon name="Heart" size="lg" color="#8B5CF6" />
      <Icon name="Heart" size="lg" color="#EC4899" />
    </div>
  );
}
```

---

## Notes

- **Design tokens**: Use theme token classes (`text-d-*`) rather than raw Tailwind colors.
- **Icon library**: Use only `laif-ds` `Icon` (no external icon libraries).