📦 Installation

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

Note: Keyrune is a required peer-dependency. This component will not work without it!

🔧 Usage

There are a number of ways you can use this library! Here are a few examples:

Vue Plugin

import Vue from 'vue'
import { Mana } from '@saeris/vue-mana'
// import mana-font once somewhere in your app to include it's css/font files
import "mana-font"

Vue.use(Mana)

// The `mana` component can now be used in your templates anywhere in the app!

Local Component Registration

import { Mana } from '@saeris/vue-mana'
import "mana-font"

export default {
  components: {
    Mana
  },
  // ...
}

JSX Component

import { Mana } from '@saeris/vue-mana'
import "mana-font"

export default {
  render() {
    return (
      <div>
        <Mana symbol="g" shadow fixed size="2x" />
      </div>
    )
  }
}

Unpkg Import

<!--Load Mana Font's CSS-->
<link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana-font.css" rel="stylesheet" type="text/css" />
<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@saeris/vue-mana"></script>

<!--Use the component somewhere in your app-->
<div id="app">
  <mana symbol="g" shadow fixed size="2x"></mana>
</div>

<script>
  new Vue({ el: '#app', data: { loading: true } })
</script>

📋 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:8080, 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 React version of this component? We've got you covered! Check out React-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.