# IconsCurrency

Xsolla virtual-currency icons (`GreenOrb`, `LoyaltyPoint`, `PlayTime`, `XsollaGold`, `XsollaPoint`, `XsollaTicket`, `XsollaZk`) with `colored` and `mono` variants.

## Installation

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

## Imports

```tsx
import { GreenOrb, LoyaltyPoint, PlayTime, XsollaGold, XsollaPoint, XsollaTicket, XsollaZk, BaseIcon, type CurrencyIconProps, type IconVariant } from '@xsolla/xui-icons-currency';
```

## Quick start

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

export default function QuickStart() {
  return <XsollaGold size={24} aria-label="Xsolla Gold" />;
}
```

## API Reference

### Currency icon components (`<XsollaGold>`, `<PlayTime>`, ...)

All currency icons accept the same props (`CurrencyIconProps`).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"colored" \| "mono"` | `"colored"` | Renders the colour or monochrome glyph. |
| `size` | `number` | `24` | Pixel size (square). |
| `color` | `string` | `"currentColor"` | Icon colour. Applies only to the `mono` variant. |
| `className` | `string` | — | CSS class on the wrapper. |
| `style` | `CSSProperties` | — | Inline styles. |
| `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`.

### `<BaseIcon>`

Internal wrapper exported for advanced use cases (custom currency icons built from raw SVG strings). Most consumers should use the named icon components.

## Available icons

| Component | Description |
| --- | --- |
| `GreenOrb` | Green Orb currency. |
| `LoyaltyPoint` | Loyalty Point currency. |
| `PlayTime` | Play Time game currency. |
| `XsollaGold` | Xsolla Gold currency. |
| `XsollaPoint` | Xsolla Point currency. |
| `XsollaTicket` | Xsolla Ticket currency. |
| `XsollaZk` | Xsolla ZK currency. |

Every icon is drawn on a 24×24 grid and scales to any `size`; the design ships
20 px and 24 px variants that are the same geometry at two scales.

## Examples

### Variants

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

export default function Variants() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <XsollaGold size={32} aria-label="Gold, colour" />
      <XsollaGold size={32} variant="mono" aria-label="Gold, monochrome" />
      <XsollaGold size={32} variant="mono" color="#FFD700" aria-label="Gold, custom colour" />
    </div>
  );
}
```

### Balance display

```tsx
import * as React from 'react';
import { XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';

export default function BalanceDisplay() {
  const balances = [
    { Icon: XsollaGold, amount: 1250, label: 'Gold' },
    { Icon: XsollaPoint, amount: 500, label: 'Points' },
    { Icon: XsollaTicket, amount: 3, label: 'Tickets' },
  ];
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      {balances.map(({ Icon, amount, label }) => (
        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon size={24} aria-hidden />
          <span>
            <span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)', whiteSpace: 'nowrap' }}>{label}: </span>
            {amount.toLocaleString()}
          </span>
        </div>
      ))}
    </div>
  );
}
```

### Price tag

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

export default function PriceTag() {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 4,
        padding: '4px 12px',
        background: '#FFF8E1',
        borderRadius: 16,
      }}
    >
      <XsollaGold size={20} aria-hidden />
      <span style={{ fontWeight: 600 }}>500 Gold</span>
    </div>
  );
}
```

## Accessibility

- Icons are hidden from screen readers by default.
- When standing alone, set `aria-label` on the icon.
- When paired with a number (e.g. price), make sure the currency name is conveyed in surrounding text or a visually hidden label.