# React Mana Font

A React TypeScript wrapper for the [Mana Font](https://github.com/andrewgioia/Mana) package, which provides Magic: The Gathering mana, tap, and card type symbols as a pictographic font.

## Installation

```bash
npm install react-mana-font
```

or with yarn:

```bash
yarn add react-mana-font
```

## Usage

Import the `ManaSymbol` component and use it in your React application:

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

function App() {
  return (
    <div>
      {/* Basic mana symbols */}
      <ManaSymbol symbol="w" /> {/* White */}
      <ManaSymbol symbol="u" /> {/* Blue */}
      <ManaSymbol symbol="b" /> {/* Black */}
      <ManaSymbol symbol="r" /> {/* Red */}
      <ManaSymbol symbol="g" /> {/* Green */}

      {/* Numbered mana */}
      <ManaSymbol symbol="1" />
      <ManaSymbol symbol="2" />

      {/* Hybrid mana */}
      <ManaSymbol symbol="w/u" half />
      <ManaSymbol symbol="r/g" half />

      {/* Phyrexian mana */}
      <ManaSymbol symbol="wp" />
      <ManaSymbol symbol="up" />

      {/* Special symbols */}
      <ManaSymbol symbol="tap" />
      <ManaSymbol symbol="untap" />
    </div>
  );
}
```

## Props

The `ManaSymbol` component accepts the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `symbol` | string | (required) | The mana symbol to display (e.g., 'g' for green, 'u' for blue, '2' for {2}) |
| `size` | 'xs' \| 'sm' \| 'lg' \| '2x' \| '3x' \| '4x' | undefined | Size variant of the symbol |
| `shadow` | boolean | false | Adds a shadow effect to the symbol |
| `fixed` | boolean | false | Makes the symbol fixed-width |
| `cost` | boolean | false | Adds a border (like on cards) |
| `half` | boolean | false | For hybrid mana symbols |
| `className` | string | undefined | Additional CSS classes |
| `style` | React.CSSProperties | undefined | Inline styles |

## Examples

### Different Sizes

```tsx
<ManaSymbol symbol="r" size="xs" /> {/* Extra small */}
<ManaSymbol symbol="r" size="sm" /> {/* Small */}
<ManaSymbol symbol="r" />           {/* Normal */}
<ManaSymbol symbol="r" size="lg" /> {/* Large */}
<ManaSymbol symbol="r" size="2x" /> {/* 2x */}
<ManaSymbol symbol="r" size="3x" /> {/* 3x */}
<ManaSymbol symbol="r" size="4x" /> {/* 4x */}
```

### Styling Options

```tsx
{/* With shadow */}
<ManaSymbol symbol="b" shadow />

{/* With cost border */}
<ManaSymbol symbol="g" cost />

{/* Fixed width */}
<ManaSymbol symbol="1" fixed />

{/* Custom styling */}
<ManaSymbol 
  symbol="w" 
  className="my-custom-class"
  style={{ marginRight: '8px' }}
/>
```

### Mana Cost Display

```tsx
<div style={{ display: 'flex', gap: '2px' }}>
  <ManaSymbol symbol="3" cost />
  <ManaSymbol symbol="u" cost />
  <ManaSymbol symbol="u" cost />
</div>
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Credits

- [Mana Font](https://github.com/andrewgioia/Mana) by Andrew Gioia
- All mana, tap, and card type symbol images are copyright [Wizards of the Coast](http://magicthegathering.com)