---
## 📦 Installation
```bash
npm install --save graphql @saeris/vue-keyrune keyrune
# or
yarn add graphql @saeris/vue-keyrune keyrune
```
> Note: [Keyrune](https://github.com/andrewgioia/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](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin)**
```js
import Vue from 'vue'
import { Keyrune } from '@saeris/vue-keyrune'
// import keyrune once somewhere in your app to include it's css/font files
import "keyrune"
Vue.use(Keyrune)
// The `keyrune` component can now be used in your templates anywhere in the app!
```
**[Local Component Registration](https://vuejs.org/v2/guide/components-registration.html#Local-Registration)**
```js
import { Keyrune } from '@saeris/vue-keyrune'
import "keyrune"
export default {
components: {
Keyrune
},
// ...
}
```
**[JSX Component](https://vuejs.org/v2/guide/render-function.html#JSX)**
```js
import { Keyrune } from '@saeris/vue-keyrune'
import "keyrune"
export default {
render() {
return (
```
## 📋 Props
Prop Name | Prop Type | Required | Default Value | Notes
----------|:---------:|:--------:|:-------------:|:-----
set | `string` | Yes | None | For a list of available sets, please refer to either [Keyrune's documentation](https://andrewgioia.github.io/Keyrune/icons.html) or the [live demo site](https://react-keyrune.saeris.io)
rarity | `string` | No | None | Possible Values: `common`, `c`, `uncommon`, `u`, `rare`, `r`, `mythic`, `m`, `timeshifted`, `t`
size | `string` | No | None | Possible Values: `2x`, `3x`, `4x`, `5x`, `6x`
gradient | `boolean` | No | `false` | Used to toggle a gradient effect on the icon. The color will change based on the value of `rarity`
foil | `boolean` | No | `false` | Used to toggle a foil color. This will override `rarity` and the fill will change when used in conjunction with `gradient`
fixed | `boolean` | No | `false` | Used to toggle fixed-width icons
## 🏖️ Demo
You can either visit the [live demo site](https://vue-keyrune.saeris.io), 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](https://codesandbox.io/s/github/Saeris/vue-keyrune/tree/master/demo).
The demo site includes a searchable list of all available sets 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-Keyrune](https://github.com/Saeris/react-keyrune).
## 📣 Acknowledgements
Special thanks to [Andrew Gioia](https://github.com/andrewgioia) the creator of [Keyrune](https://github.com/andrewgioia/Keyrune) 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](http://magicthegathering.com) for creating this game we all love!
## 🥂 License
All card symbol images are copyright [Wizards of the Coast](http://magicthegathering.com).
Keyrune is licensed under the the [SIL OFL 1.1 license](http://scripts.sil.org/OFL).
Released under the [MIT license](https://github.com/Saeris/vue-keyrune/blob/master/LICENSE.md).
