React Mana Symbols

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

Installation

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

Usage

Individual Mana Symbols

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

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