# Icons Base

A comprehensive collection of functional UI icons organized by category. Each icon is available in both solid (filled) and line (outlined) variants for design flexibility.

## Installation

```bash
npm install @xsolla/xui-icons-base
# or
yarn add @xsolla/xui-icons-base
```

## Demo

### Basic Usage

```tsx
import * as React from 'react';
import { HomeSolid, HomeLine } from '@xsolla/xui-icons-base';

export default function BasicIconsBase() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <HomeSolid size={24} />
      <HomeLine size={24} />
    </div>
  );
}
```

### Icon Variants

```tsx
import * as React from 'react';
import {
  StarSolid, StarLine,
  HeartSolid, HeartLine,
  BellSolid, BellLine,
} from '@xsolla/xui-icons-base';

export default function IconVariants() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: 16 }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <StarSolid size={24} />
        <span>Solid</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <StarLine size={24} />
        <span>Line</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <HeartSolid size={24} color="#e74c3c" />
        <span>Solid</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <HeartLine size={24} color="#e74c3c" />
        <span>Line</span>
      </div>
    </div>
  );
}
```

### Custom Sizes

```tsx
import * as React from 'react';
import { CheckCircleSolid } from '@xsolla/xui-icons-base';

export default function IconSizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <CheckCircleSolid size={16} />
      <CheckCircleSolid size={20} />
      <CheckCircleSolid size={24} />
      <CheckCircleSolid size={32} />
      <CheckCircleSolid size={48} />
    </div>
  );
}
```

## Anatomy

Import icons directly by name with their variant suffix:

```jsx
import { IconNameSolid, IconNameLine } from '@xsolla/xui-icons-base';

// Solid variant (filled)
<IconNameSolid size={24} color="#color" />

// Line variant (outlined)
<IconNameLine size={24} color="#color" />
```

## Icon Categories

### User Interface

```tsx
import {
  // Navigation
  HomeSolid, HomeLine,
  SearchSolid, SearchLine,
  MenuSolid, MenuLine,
  SettingsSolid, SettingsLine,

  // Actions
  PlusSolid, PlusLine,
  EditSolid, EditLine,
  TrashSolid, TrashLine,
  CopySolid, CopyLine,
} from '@xsolla/xui-icons-base';
```

### Communication

```tsx
import {
  MailSolid, MailLine,
  MessageSolid, MessageLine,
  NotificationSolid, NotificationLine,
  BellSolid, BellLine,
} from '@xsolla/xui-icons-base';
```

### Media

```tsx
import {
  ImageSolid, ImageLine,
  CameraSolid, CameraLine,
  VideoSolid, VideoLine,
  PlaySolid, PlayLine,
  PauseSolid, PauseLine,
} from '@xsolla/xui-icons-base';
```

### Files & Folders

```tsx
import {
  FileSolid, FileLine,
  FolderSolid, FolderLine,
  DocumentSolid, DocumentLine,
  DownloadSolid, DownloadLine,
  UploadSolid, UploadLine,
} from '@xsolla/xui-icons-base';
```

### Status & Feedback

```tsx
import {
  CheckCircleSolid, CheckCircleLine,
  WarningCircleSolid, WarningCircleLine,
  ErrorCircleSolid, ErrorCircleLine,
  InfoCircleSolid, InfoCircleLine,
  HelpCircleSolid, HelpCircleLine,
} from '@xsolla/xui-icons-base';
```

### Shopping & E-commerce

```tsx
import {
  CartSolid, CartLine,
  BagSolid, BagLine,
  CreditCardSolid, CreditCardLine,
  TagSolid, TagLine,
  GiftSolid, GiftLine,
} from '@xsolla/xui-icons-base';
```

## Examples

### Icon Grid Display

```tsx
import * as React from 'react';
import * as Icons from '@xsolla/xui-icons-base';

export default function IconGrid() {
  const solidIcons = [
    'HomeSolid', 'SearchSolid', 'UserSolid', 'SettingsSolid',
    'BellSolid', 'HeartSolid', 'StarSolid', 'BookmarkSolid'
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
      {solidIcons.map(name => {
        const IconComponent = Icons[name];
        return (
          <div key={name} style={{ textAlign: 'center' }}>
            <IconComponent size={24} />
            <div style={{ fontSize: 10, marginTop: 4 }}>
              {name.replace('Solid', '')}
            </div>
          </div>
        );
      })}
    </div>
  );
}
```

### Toggle Between Variants

```tsx
import * as React from 'react';
import { HeartSolid, HeartLine } from '@xsolla/xui-icons-base';

export default function ToggleIcon() {
  const [liked, setLiked] = React.useState(false);

  return (
    <button
      onClick={() => setLiked(!liked)}
      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
    >
      {liked ? (
        <HeartSolid size={24} color="#e74c3c" />
      ) : (
        <HeartLine size={24} />
      )}
    </button>
  );
}
```

### Status Indicators

```tsx
import * as React from 'react';
import {
  CheckCircleSolid,
  WarningCircleSolid,
  ErrorCircleSolid,
  InfoCircleSolid,
} from '@xsolla/xui-icons-base';

export default function StatusIndicators() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <CheckCircleSolid size={20} color="#2ecc71" />
        <span>Success message</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <WarningCircleSolid size={20} color="#f39c12" />
        <span>Warning message</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <ErrorCircleSolid size={20} color="#e74c3c" />
        <span>Error message</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <InfoCircleSolid size={20} color="#3498db" />
        <span>Info message</span>
      </div>
    </div>
  );
}
```

## API Reference

### Icon Components

All icons share the same props interface.

**Icon Props:**

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| size | `number` | `24` | Icon size in pixels. |
| color | `string` | `currentColor` | Icon color. |

### Naming Convention

Icons follow a consistent naming pattern:

```
{IconName}{Variant}

Where:
- IconName: PascalCase name (e.g., Home, CheckCircle, ShoppingCart)
- Variant: Either "Solid" or "Line"

Examples:
- HomeSolid, HomeLine
- CheckCircleSolid, CheckCircleLine
- ShoppingCartSolid, ShoppingCartLine
```

## Theming

Icons use `currentColor` by default, inheriting color from parent elements:

```tsx
// Icon inherits text color from parent
<div style={{ color: '#3498db' }}>
  <HomeSolid /> {/* Will be #3498db */}
</div>

// Or set color directly
<HomeSolid color="#e74c3c" />
```

## Accessibility

- Icons are decorative by default (`aria-hidden="true"`)
- When using icons to convey meaning, add appropriate `aria-label` to the container
- For icon-only buttons, always provide accessible labels
