# SilkeIcon

A versatile icon component that supports multiple icon sources including the built-in icon library, custom React elements, emoji icons, and external image URLs.

## Features

- **Built-in icons**: Access 100+ icons from the Silke icon library
- **Theme colors**: Apply any Silke color to icons
- **Custom icons**: Pass React elements as icons
- **Emoji support**: Render emoji characters and shapes
- **Font Awesome classes**: Use any `fa-*` class name directly
- **URL images**: Load icons from external URLs
- **Sizing**: Control size via font-size

## Basic Usage

```js
<SilkeBox gap="m">
  <SilkeIcon icon="add" />
  <SilkeIcon icon="edit" />
  <SilkeIcon icon="delete" />
  <SilkeIcon icon="check" />
  <SilkeIcon icon="close" />
</SilkeBox>
```

## Icon Browser

Search and browse all available icons:

```js
const [search, setSearch] = React.useState('');

<SilkeBox column gap="s">
  <SilkeSearchField placeholder="Search for icons" value={search} onChange={setSearch} />
  <SilkeBox gap wrap style={{ maxHeight: 300, overflow: 'auto' }}>
    {Object.keys(SilkeIconDefinitions)
      .filter((icon) => icon.toLowerCase().includes(search.toLowerCase()))
      .map((icon) => (
        <SilkeBox key={icon} gap="s" vPad="s" vAlign="center" style={{ width: 180 }}>
          <SilkeIcon icon={icon} style={{ fontSize: 20 }} />
          <SilkeText size="s">{icon}</SilkeText>
        </SilkeBox>
      ))}
  </SilkeBox>
</SilkeBox>;
```

## Icon Colors

Apply theme colors using the `color` prop:

```js
<SilkeBox gap="m">
  <SilkeIcon icon="star" color="accent-50" style={{ fontSize: 24 }} />
  <SilkeIcon icon="check" color="success-50" style={{ fontSize: 24 }} />
  <SilkeIcon icon="error" color="error-50" style={{ fontSize: 24 }} />
  <SilkeIcon icon="warning.triangle" color="warning-50" style={{ fontSize: 24 }} />
  <SilkeIcon icon="tooltip" color="neutral-60" style={{ fontSize: 24 }} />
</SilkeBox>
```

## Icon Sizes

Control icon size using CSS `fontSize`:

```js
<SilkeBox gap="m" vAlign="end">
  <SilkeIcon icon="star" style={{ fontSize: 12 }} />
  <SilkeIcon icon="star" style={{ fontSize: 16 }} />
  <SilkeIcon icon="star" style={{ fontSize: 24 }} />
  <SilkeIcon icon="star" style={{ fontSize: 32 }} />
  <SilkeIcon icon="star" style={{ fontSize: 48 }} />
</SilkeBox>
```

## Custom React Element

Pass a React element as the icon:

```js
const CustomIcon = () => (
  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
    <circle cx="12" cy="12" r="10" />
  </svg>
);

<SilkeBox gap="m">
  <SilkeIcon icon={<CustomIcon />} style={{ fontSize: 24 }} />
  <SilkeIcon icon={<CustomIcon />} color="accent-50" style={{ fontSize: 32 }} />
</SilkeBox>;
```

## Font Awesome icons

You can pass any Font Awesome class name (e.g. `fa-solid fa-star`) as a string that starts with `fa-`:

```js
<SilkeBox gap="m">
  <SilkeIcon icon="fa-solid fa-star" style={{ fontSize: 24 }} />
  <SilkeIcon icon="fa-regular fa-heart" style={{ fontSize: 24 }} />
</SilkeBox>
```

## Image URL

Load icons from external URLs:

```js
<SilkeBox gap="m">
  <SilkeIcon icon="https://cdn.jsdelivr.net/npm/@mdi/svg@7.2.96/svg/react.svg" style={{ fontSize: 32 }} />
</SilkeBox>
```

## Common Icons

```js
<SilkeBox column gap="m">
  <SilkeBox gap="l" wrap>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="add" style={{ fontSize: 24 }} />
      <SilkeText size="s">add</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="delete" style={{ fontSize: 24 }} />
      <SilkeText size="s">delete</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="edit" style={{ fontSize: 24 }} />
      <SilkeText size="s">edit</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="check" style={{ fontSize: 24 }} />
      <SilkeText size="s">check</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="close" style={{ fontSize: 24 }} />
      <SilkeText size="s">close</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="search" style={{ fontSize: 24 }} />
      <SilkeText size="s">search</SilkeText>
    </SilkeBox>
  </SilkeBox>
  <SilkeBox gap="l" wrap>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="settings" style={{ fontSize: 24 }} />
      <SilkeText size="s">settings</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="home" style={{ fontSize: 24 }} />
      <SilkeText size="s">home</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="star" style={{ fontSize: 24 }} />
      <SilkeText size="s">star</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="copy" style={{ fontSize: 24 }} />
      <SilkeText size="s">copy</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="download" style={{ fontSize: 24 }} />
      <SilkeText size="s">download</SilkeText>
    </SilkeBox>
    <SilkeBox column gap="xs" vAlign="center" style={{ width: 80 }}>
      <SilkeIcon icon="upload" style={{ fontSize: 24 }} />
      <SilkeText size="s">upload</SilkeText>
    </SilkeBox>
  </SilkeBox>
</SilkeBox>
```

## AI Icons

Special icons for AI features:

```js
<SilkeBox gap="l">
  <SilkeBox column gap="xs" vAlign="center">
    <SilkeIcon icon="ai" style={{ fontSize: 24 }} />
    <SilkeText size="s">ai</SilkeText>
  </SilkeBox>
  <SilkeBox column gap="xs" vAlign="center">
    <SilkeIcon icon="ai.sparkle" style={{ fontSize: 24 }} />
    <SilkeText size="s">ai.sparkle</SilkeText>
  </SilkeBox>
  <SilkeBox column gap="xs" vAlign="center">
    <SilkeIcon icon="sparkles" style={{ fontSize: 24 }} />
    <SilkeText size="s">sparkles</SilkeText>
  </SilkeBox>
</SilkeBox>
```

## Props

| Prop        | Type                                           | Default | Description                     |
| ----------- | ---------------------------------------------- | ------- | ------------------------------- |
| `icon`      | `SilkeIcons \| React.ReactElement`             | Required| Icon to display                 |
| `color`     | `SilkeColor \| string`                         | -       | Icon color                      |
| `className` | `string`                                       | -       | Additional CSS class names      |
| `style`     | `React.CSSProperties`                          | -       | Inline styles (use for sizing)  |

Also accepts all standard HTML element attributes.

## Types

```typescript
type SilkeIcons = keyof typeof SilkeIconDefinitions | null | IEmojiIcon | `fa-${string}`;

interface IEmojiIcon {
  type: EmojiType;
  value: string | { url: string };
}

enum EmojiType {
  icon = 'icon',
  upload = 'upload',
  emoji = 'emoji',
}
```

## Icon Categories

The icon library includes icons for:
- **Basic**: add, delete, edit, check, close, search
- **Navigation**: home, arrow.*, chevron.*, menu
- **Media**: play, pause, image, video, audio
- **Files**: file, folder, document, download, upload
- **Communication**: email, chat, share, link
- **AI**: ai, ai.sparkle, sparkles
- **Status**: error, warning, success, tooltip
- **And many more...**

Use the Icon Browser above to explore all available icons.