# Icon

A comprehensive collection of SVG icons powered by [Lucide React](https://lucide.dev/), offering consistent styling, customizable colors, sizes, and orientations. All icons are optimized for accessibility and performance.

### **Import**
  ```tsx
  import { Icon, UploadIcon, EditIcon } from '@app-studio/web';
  ```

### **Basic Usage**

You can use the named exports for common icons or the generic `Icon` component for any Lucide icon.

```tsx
import React from 'react';
import { UploadIcon, EditIcon, DeleteIcon } from '@app-studio/web';
import { Horizontal } from '@app-studio/web';

export const BasicIcons = () => (
  <Horizontal gap={16}>
    <UploadIcon widthHeight={24} />
    <EditIcon widthHeight={24} />
    <DeleteIcon widthHeight={24} />
  </Horizontal>
);
```

### **Dynamic Usage (All Lucide Icons)**

Access any icon from the [Lucide library](https://lucide.dev/icons) using the `name` prop.

```tsx
import React from 'react';
import { Icon } from '@app-studio/web';

export const DynamicIcons = () => (
  <Icon name="camera" widthHeight={24} color="color-primary-500" />
);
```

### **Icon Sizes**
```tsx
import React from 'react';
import { StarIcon } from '@app-studio/web';
import { Horizontal } from '@app-studio/web';

export const IconSizes = () => (
  <Horizontal gap={16} alignItems="center">
    <StarIcon widthHeight={16} />
    <StarIcon widthHeight={24} />
    <StarIcon widthHeight={32} />
    <StarIcon widthHeight={48} />
    <StarIcon widthHeight={64} />
  </Horizontal>
);
```

### **Icon Colors**
```tsx
import React from 'react';
import { HeartIcon } from '@app-studio/web';
import { Horizontal } from '@app-studio/web';

export const IconColors = () => (
  <Horizontal gap={16}>
    <HeartIcon widthHeight={32} color="color-red-500" />
    <HeartIcon widthHeight={32} color="color-blue-500" />
    <HeartIcon widthHeight={32} color="color-green-500" />
    <HeartIcon widthHeight={32} color="color-purple-500" />
    <HeartIcon widthHeight={32} color="color-orange-500" />
  </Horizontal>
);
```

### **Icon Styles**
Since we use Lucide, `filled` creates a solid style where applicable, but generally Lucide icons are line-art. The `filled` prop typically fills the path with the current color-

```tsx
import React from 'react';
import { StarIcon, HeartIcon } from '@app-studio/web';
import { Horizontal, Vertical, Text } from '@app-studio/web';

export const IconVariants = () => (
  <Vertical gap={16}>
    <Text>Filled Styles</Text>
    <Horizontal gap={16}>
      <StarIcon widthHeight={32} filled={true} color="color-yellow-500" />
      <HeartIcon widthHeight={32} filled={true} color="color-red-500" />
    </Horizontal>

    <Text>Line Styles</Text>
    <Horizontal gap={16}>
      <StarIcon widthHeight={32} filled={false} color="color-yellow-500" />
      <HeartIcon widthHeight={32} filled={false} color="color-red-500" />
    </Horizontal>
  </Vertical>
);
```

### **Icon Orientations**
```tsx
import React from 'react';
import { ArrowIcon } from '@app-studio/web';
import { Horizontal, Text } from '@app-studio/web';

export const IconOrientations = () => (
  <Horizontal gap={24} alignItems="center">
    <div>
      <Text fontSize={12}>Up</Text>
      <ArrowIcon widthHeight={32} orientation="up" />
    </div>
    <div>
      <Text fontSize={12}>Right</Text>
      <ArrowIcon widthHeight={32} orientation="right" />
    </div>
    <div>
      <Text fontSize={12}>Down</Text>
      <ArrowIcon widthHeight={32} orientation="down" />
    </div>
    <div>
      <Text fontSize={12}>Left</Text>
      <ArrowIcon widthHeight={32} orientation="left" />
    </div>
  </Horizontal>
);
```

### **Available Pre-exported Icons**

We provide named exports for common icons for convenience and backward compatibility. For everything else, use `<Icon name="..." />`.

- `ArrowIcon` (arrow-up)
- `AttachmentIcon` (paperclip)
- `AudioIcon` (volume)
- `BackIcon` (chevron-left)
- `BatteryIcon` (battery)
- `BluetoothIcon` (bluetooth)
- `BoldArrowIcon` (arrow-right, approximate)
- `BookmarkIcon` (bookmark)
- `CalendarIcon` (calendar)
- `CameraIcon` (camera)
- `ChartIcon` (bar-chart)
- `CheckIcon` (check)
- `ChevronIcon` (chevron-up)
- `ClockIcon` (clock)
- `CloseEyeIcon` (eye-off)
- `CloseIcon` (x)
- `CloudIcon` (cloud)
- `CopyIcon` (copy)
- `CreditCardIcon` (credit-card)
- `CropIcon` (crop)
- `DeleteIcon` (trash)
- `DocumentIcon` (file-text)
- `DownloadIcon` (download)
- `DragHandleIcon` (grip-vertical)
- `DragHandleLinesIcon` (grip-horizontal)
- `DustBinIcon` (trash)
- `EditIcon` (edit)
- `ErrorIcon` (alert-circle)
- `ExternalLinkIcon` (external-link)
- `FacebookIcon` (facebook)
- `FileIcon` (file)
- `FilterIcon` (filter)
- `FolderIcon` (folder)
- `GiftIcon` (gift)
- `HeartIcon` (heart)
- `HelpIcon` (circle-help)
- `HomeIcon` (home)
- `ImageIcon` (image)
- `InfoIcon` (info)
- `InstagramIcon` (instagram)
- `LayoutIcon` (layout)
- `LikeIcon` (thumbs-up)
- `LinkIcon` (link)
- `LinkedinIcon` (linkedin)
- `LoadingSpinnerIcon` (loader)
- `LocationIcon` (map-pin)
- `LockIcon` (lock)
- `LogoutIcon` (log-out)
- `MagicWandIcon` (wand)
- `MapPinIcon` (map-pin)
- `MenuIcon` (menu)
- `MicrophoneIcon` (mic)
- `MinusIcon` (minus)
- `MoonIcon` (moon)
- `MoreHorizontalIcon` (more-horizontal)
- `MoreVerticalIcon` (more-vertical)
- `NotificationIcon` (bell)
- `OpenEyeIcon` (eye)
- `PanelIcon` (panel-left)
- `PauseIcon` (pause)
- `PlayIcon` (play)
- `PlusIcon` (plus)
- `PowerOffIcon` (power)
- `PrintIcon` (printer)
- `ProfileIcon` (user)
- `RefreshIcon` (refresh-cw)
- `RotateIcon` (rotate-cw)
- `SaveIcon` (save)
- `SearchIcon` (search)
- `SendIcon` (send)
- `SettingsIcon` (settings)
- `ShapeIcon` (shapes)
- `ShareIcon` (share)
- `ShieldIcon` (shield)
- `SliderIcon` (sliders-horizontal)
- `SpinnerIcon` (loader)
- `StarIcon` (star)
- `StopIcon` (square)
- `SuccessIcon` (check-circle)
- `TextIcon` (type)
- `ThreadsIcon` (at-sign)
- `TickIcon` (check)
- `TrashIcon` (trash)
- `TwitchIcon` (twitch)
- `TwitterIcon` (twitter)
- `UnLikeIcon` (thumbs-down)
- `UnlockIcon` (unlock)
- `UploadIcon` (upload)
- `UserIcon` (user)
- `VideoIcon` (video)
- `WarningIcon` (triangle-alert)
- `WifiIcon` (wifi)
- `XIcon` (x)
- `YoutubeIcon` (youtube)
- `ZapIcon` (zap)
- `ZoomInIcon` (zoom-in)
- `ZoomOutIcon` (zoom-out)

### **Props**

The `Icon` component accepts the following props:

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| name | string | 'circle' | **Required for generic component.** The name of the Lucide icon to render (kebab-case). |
| widthHeight | number | 24 | Size of the icon in pixels (sets both width and height) |
| size | number | undefined | Alternative to widthHeight, consistent with Lucide props |
| color | string | 'currentColor' | Color of the icon (supports theme colors) |
| filled | boolean | false | Whether to fill the icon body with color- Note: applies to all line-art. |
| strokeWidth | number | 1-2 | Stroke width for the icon lines |
| orientation | `'left' \| 'right' \| 'up' \| 'down'` | 'up' | Rotates the icon |
| transform | string | undefined | Custom CSS transform property |

### **IconWrapper Props**

All icons inherit from the base `IconWrapper` component which extends `ViewProps`:

| Prop | Type | Description |
| ---- | ---- | ----------- |
| className | string | CSS class name for styling |
| style | CSSProperties | Inline styles |
| onClick | function | Click event handler |
| ... | ... | Standard HTML attributes |

### **Custom Icons**

You generally don't need to create custom wrappers anymore, as you can use `<Icon name="..." />` directly. However, if you want to create a named export for a generic Lucide icon:

```tsx
import React from 'react';
import { Icon } from '@app-studio/web';

export const MyNewIcon = (props) => <Icon name="rocket" {...props} />;
```

### **Icon Grid Display**
```tsx
import React from 'react';
import * as Icons from '@app-studio/web';
import { View, Text } from '@app-studio/web';

export const IconGrid = () => {
  const iconNames = Object.keys(Icons).filter(name =>
    name.endsWith('Icon') && name !== 'IconWrapper'
  );

  return (
    <View
      display="grid"
      gridTemplateColumns="repeat(auto-fill, minmax(120px, 1fr))"
      gap={16}
    >
      {iconNames.map((iconName) => {
        const IconComponent = Icons[iconName as keyof typeof Icons];
        return (
          <View
            key={iconName}
            padding={12}
            border="1px solid"
            borderColor="color-gray-200"
            borderRadius={8}
            textAlign="center"
          >
            {/* Some icons might need specific props, generic render here */}
             <IconComponent widthHeight={24} color="color-gray-700" />
            <Text fontSize={10} marginTop={4}>
              {iconName}
            </Text>
          </View>
        );
      })}
    </View>
  );
};
```