A simple React component wrapper around Mana Font.
📦 Installation
npm install --save @saeris/react-mana mana-font
# or
yarn add @saeris/react-mana mana-fontNote: Mana Font is a required peer-dependency. This component will not work without it!
🔧 Usage
To use this component, simply import it and pass in some props:
import React, { Component } from "react"
import { render } from "react-dom"
import { Mana } from "@saeris/react-mana"
const App = () => (
<Mana symbol="g" shadow fixed size="2x"/>
)
render(<App />, document.getElementById("root"))📋 Props
| Prop Name | Prop Type | Required | Default Value | Notes |
|---|---|---|---|---|
| symbol | string |
Yes | None | For a list of available symbols, please refer to either Mana Font's documentation or the live demo site |
| size | string |
No | None | Possible Values: 2x, 3x, 4x, 5x, 6x |
| cost | boolean |
No | false |
Used to toggle a background circle on the icon. The color will change based on the value of symbol |
| shadow | boolean |
No | false |
Used to toggle a drop-shadow and background. When set, cost will also be set to true |
| half | boolean |
No | false |
Used to toggle rendering Unhinged "half" mana symbols |
| fixed | boolean |
No | false |
Used to toggle fixed-width icons |
| loyalty | number |
No | null |
When used with a Loyalty symbol, this controls the number displayed on top of the icon. Valid values are 0 to 20 |
🏖️ Demo
You can either visit the live demo site, clone this repo and run the demo locally using yarn start and opening your browser to http://localhost:3000, or you can just play with it inside of CodeSandbox here.
The demo site includes a searchable list of all available symbols with a handy preview tool with which you can quickly see the effects of the available props along with generated markup you can copy and paste right into your own application!
🍴 Alternatives
Looking for a Vue version of this component? We've got you covered! Check out Vue-Mana.
📣 Acknowledgements
Special thanks to Andrew Gioia the creator of Mana Font and to all that project's awesome contributors, without whom this library wouldn't exist!
And of course, a huge thanks to Wizards of the Coast for creating this game we all love!
🥂 License
All card symbol images are copyright Wizards of the Coast.
Mana Font is licensed under the the SIL OFL 1.1 license.
Released under the MIT license.