Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mana-symbols) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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