React-mana-font NPM

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

react mana mtg magic font component

mana-font react

0.1.1

4 months ago

0.1.0

4 months ago