react-mana-symbols/README.md

React component library for rendering Magic: The Gathering mana symbols

# React Mana Symbols

A React component library for rendering Magic: The Gathering mana symbols.

## Installation

```bash
npm install react-mana-symbols
# or
yarn add react-mana-symbols
```

## Usage

### Individual Mana Symbols

```tsx
import { ManaSymbol } from 'react-mana-symbols';

function MyComponent() {
  return (
    <div>
      <ManaSymbol symbol="B" /> {/* Black mana */}
      <ManaSymbol symbol="2/R" size={32} /> {/* Hybrid 2/Red mana at 32px */}
      <ManaSymbol symbol="G/P" className="my-class" /> {/* Phyrexian Green mana */}
    </div>
  );
}
```

### Mana Costs

```tsx
import { ManaCost } from 'react-mana-symbols';

function MyComponent() {
  return (
    <div>
      <ManaCost cost="{3}{B}{B}" /> {/* Renders: 3BB */}
      <ManaCost cost="{X}{R}{R}" size={32} /> {/* Renders: XRR at 32px */}
      <ManaCost cost="{W/U}{W/U}" className="my-class" /> {/* Renders: White/Blue hybrid */}
    </div>
  );
}
```

## Supported Symbols

- Basic colors: W, U, B, R, G
- Colorless: C
- Generic mana: 0-20
- Variable mana: X
- Hybrid mana (generic/colored): 2/W, 2/U, 2/B, 2/R, 2/G
- Hybrid mana (colored): W/U, W/B, U/B, U/R, B/R, B/G, R/G, R/W, G/W, G/U
- Phyrexian mana: W/P, U/P, B/P, R/P, G/P
- Special symbols: S (Snow), T (Tap), Q (Untap), E (Energy)

## Props

### ManaSymbol

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| symbol | ManaSymbol | required | The mana symbol to display |
| size | number | 24 | Size of the symbol in pixels |
| className | string | '' | Additional CSS class name |

### ManaCost

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| cost | string | required | The mana cost string (e.g. "{3}{B}{B}") |
| size | number | 24 | Size of each symbol in pixels |
| className | string | '' | Additional CSS class name |

## License

MIT