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