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-font) 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 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