@saeris/vue keyrune

A simple Vue component wrapper around Keyrune

Version: 1.0.5 Updated: 10/13/2018

By: Saeris License: MIT

Downloads Last 30 Days: 206


npm i @saeris/vue-keyrune
yarn add @saeris/vue-keyrune

Repository: https://github.com/Saeris/vue-keyrune


bundle.run: https://bundle.run/@saeris/vue-keyrune

jsDelivr: https://cdn.jsdelivr.net/npm/@saeris/vue-keyrune

unpkg: https://unpkg.com/@saeris/vue-keyrune

Vue Keyrune

npm travis codecov Known Vulnerabilities Known Vulnerabilities

A simple Vue component wrapper around Keyrune.

📦 Installation

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

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 { Keyrune } from '@saeris/vue-keyrune'
// import keyrune once somewhere in your app to include it's css/font files
import "keyrune"


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

Local Component Registration

import { Keyrune } from '@saeris/vue-keyrune'
import "keyrune"

export default {
  components: {
  // ...

JSX Component

import { Keyrune } from '@saeris/vue-keyrune'
import "keyrune"

export default {
  render() {
    return (
        <Keyrune set="leg" rarity="mythic" gradient fixed size="2x" />

Unpkg Import

<!--Load Keyrune's CSS-->
<link href="//cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.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-keyrune"></script>

<!--Use the component somewhere in your app-->
<div id="app">
  <keyrune set="leg" rarity="mythic" gradient fixed size="2x"></keyrune>

  new Vue({ el: '#app', data: { loading: true } })

📋 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 or the live demo site
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, 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 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.

📣 Acknowledgements

Special thanks to Andrew Gioia the creator of 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 for creating this game we all love!

🥂 License

All card symbol images are copyright Wizards of the Coast.

Keyrune is licensed under the the SIL OFL 1.1 license.

Released under the MIT license.

Categories: Vue js