@saeris/react-mana NPM

📦 Installation

npm install --save graphql @saeris/react-mana mana-font
# or
yarn add graphql @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!