🌳 A simple Vue component wrapper around Mana Font
MIT License
npm install --save @saeris/vue-mana mana-font
# or
yarn add @saeris/vue-mana mana-font
Note: Keyrune is a required peer-dependency. This component will not work without it!
There are a number of ways you can use this library! Here are a few examples:
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!
import { Mana } from '@saeris/vue-mana'
import "mana-font"
export default {
components: {
Mana
},
// ...
}
import { Mana } from '@saeris/vue-mana'
import "mana-font"
export default {
render() {
return (
<div>
<Mana symbol="g" shadow fixed size="2x" />
</div>
)
}
}
<!--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>
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
|
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!
Looking for a React version of this component? We've got you covered! Check out React-Mana.
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!
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.