React Mana Font

A React TypeScript wrapper for the Mana Font package, which provides Magic: The Gathering mana, tap, and card type symbols as a pictographic font.

Installation

npm install react-mana-font

or with yarn:

yarn add react-mana-font

Usage

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

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

<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

{/* 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

<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 by Andrew Gioia
• All mana, tap, and card type symbol images are copyright Wizards of the Coast