Skip to content

Saeris/react-mana

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Mana

Package Version Build Status Code Coverage Known Vulnerabilities Dependencies

A simple React component wrapper around Mana Font.


πŸ“¦ Installation

npm install --save @saeris/react-mana mana-font
# or
yarn add @saeris/react-mana mana-font

Note: 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.

About

🌳 A simple React component wrapper around Mana Font

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published