# IconsBase

A comprehensive collection of functional UI icons (500+) organised by category. Each icon renders through a shared `BaseIcon` wrapper and supports `solid` and `line` variants via the `variant` prop.

## Installation

```bash
npm install @xsolla/xui-icons-base
```

## Imports

```tsx
import { Home, Star, Heart, Bell, Search, BaseIcon, type BaseIconProps, type IconVariant } from '@xsolla/xui-icons-base';
```

## Quick start

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

export default function QuickStart() {
  return <Home size={24} aria-hidden />;
}
```

Each icon is a single component (e.g. `Home`, `Star`, `Heart`). Switch its appearance via `variant`:

```tsx
<Home variant="line" />   {/* default */}
<Home variant="solid" />
```

## API Reference

### Icon components (`<Home>`, `<Star>`, `<Heart>`, ...)

All exported icon components accept the same props (`BaseIconProps`).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"solid" \| "line"` | `"line"` | Renders the solid (filled) or line (outlined) glyph. |
| `size` | `number \| string` | `24` | Pixel size, or any CSS length (e.g. `"100%"` to fill its container). |
| `color` | `string` | `"currentColor"` | Icon colour. Inherits from CSS `color` by default. |
| `className` | `string` | — | Additional class on the wrapper element. |
| `style` | `CSSProperties` | — | Inline styles on the wrapper element. |
| `data-testid` | `string` | — | Test ID (web). |
| `testID` | `string` | — | Test ID (React Native). |
| `aria-label` | `string` | — | Accessible label. When set, the icon is exposed as `role="img"`. |
| `aria-hidden` | `boolean` | `true` if no `aria-label` | Hide from assistive tech. |

This package does not consume `ThemeOverrideProps`; icons inherit colour from the surrounding text via `currentColor`.

### `<BaseIcon>`

Internal wrapper. Exported for advanced use cases (e.g. building custom icon components from raw SVG strings). Most consumers should use the named icon components instead.

## Examples

### Variant toggle

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

export default function Toggle() {
  const [liked, setLiked] = React.useState(false);
  return (
    <button
      type="button"
      onClick={() => setLiked((v) => !v)}
      aria-pressed={liked}
      aria-label={liked ? 'Unlike' : 'Like'}
      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
    >
      <Heart variant={liked ? 'solid' : 'line'} color={liked ? '#e74c3c' : 'currentColor'} aria-hidden />
    </button>
  );
}
```

### Sizing

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Star size={16} aria-hidden />
      <Star size={20} aria-hidden />
      <Star size={24} aria-hidden />
      <Star size={32} aria-hidden />
      <Star size="100%" aria-hidden />
    </div>
  );
}
```

### Status indicators

```tsx
import * as React from 'react';
import { Check, Warning, InfoCr, RemoveCr } from '@xsolla/xui-icons-base';

export default function Statuses() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <Check variant="solid" color="#2ecc71" aria-hidden /> Saved
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <Warning variant="solid" color="#f39c12" aria-hidden /> Verify details
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <RemoveCr variant="solid" color="#e74c3c" aria-hidden /> Failed
      </span>
      <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <InfoCr variant="line" color="#3498db" aria-hidden /> More info
      </span>
    </div>
  );
}
```

### Icon-only button

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

export default function SettingsButton() {
  return (
    <IconButton aria-label="Open settings">
      <Settings />
    </IconButton>
  );
}
```

## Available icons

The package exports 500+ icons grouped by category. Categories include:

`alignments-layouts`, `bookmarks`, `chart-graphs`, `communication`, `controls`, `date-time`, `design`, `devices-electronics`, `files-folders`, `finance-payment`, `formatting`, `games`, `media-controls`, `navigation-travel`, `shopping-ecommerce`, `specialized`, `user-interface`.

Common examples: `Home`, `Search`, `User`, `Users`, `Settings`, `Bell`, `Heart`, `Star`, `Eye`, `EyeOff`, `Lock`, `LockOpen`, `Edit`, `TrashCan`, `Plus`, `Minus`, `Check`, `Warning`, `ChevronDown`, `ChevronUp`, `ChevronLeft`, `ChevronRight`, `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Copy`, `Mail`, `Phone`, `Calendar`, `Clock`, `Image`, `File`, `Folder`, `ShoppingCart`, `ShoppingBag`, `BankCard`, `Wallet`.

For the full list, see the package barrel file at `packages/foundation/icons-base/src/index.ts`.

## Accessibility

- Icons render `aria-hidden="true"` by default — pair them with visible text.
- When an icon stands alone, set `aria-label` so it is exposed as `role="img"`.
- For interactive icon-only controls, prefer `IconButton` from `@xsolla/xui-button`, which enforces an accessible label.