https://github.com/dipu-bd/vue-skycons

A set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.
https://github.com/dipu-bd/vue-skycons

animation icons skycons vue weather

Last synced: 13 days ago
JSON representation

A set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.

• Host: GitHub
• URL: https://github.com/dipu-bd/vue-skycons
• Owner: dipu-bd
• License: mit
• Created: 2020-07-17T01:44:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-14T13:25:12.000Z (2 months ago)
• Last Synced: 2024-11-27T21:40:56.700Z (25 days ago)
• Topics: animation, icons, skycons, vue, weather
• Language: JavaScript
• Homepage: https://dipu-bd.github.io/vue-skycons
• Size: 3.06 MB
• Stars: 11
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Skycons

[![npm](https://img.shields.io/npm/v/vue-skycons)](http://npmjs.com/package/vue-skycons)

[![npm download per month](https://img.shields.io/npm/dm/vue-skycons)](http://npmjs.com/package/vue-skycons)

[![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/vue-skycons?color=red)](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/package.json)

[![NPM license](https://img.shields.io/npm/l/vue-skycons?color=blueviolet)](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/LICENSE)

This was inspired by [Skycons](https://github.com/darkskyapp/skycons) -- a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They're easy to use, and pretty lightweight, so they shouldn't rain on your parade.

![icons.gif](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/images/icons.gif)

## Installation

### NPM

```sh

npm install --save vue-skycons

```

### YARN

```sh

yarn add vue-skycons

```

## Examples

### Register Component

```js

import Vue from "vue";

import Skycon from "vue-skycons";

Vue.component("skycon", Skycon);

```

### Using Component

```vue

  


    

    

    

    

    

    

    

    

    

    

    


    

    

  


import Skycon from "vue-skycons";

export default {

  components: {

    Skycon

  }

}

```

### Available props

```js

// Weather condition

condition: {

  type: String,

  required: true,

},

// Icon size

size: {

  type: [Number, String],

  default: 64,

},

// Icon color

color: {

  type: String,

  default: "black",

},

// Start with paused animation

paused: {

  type: Boolean,

  default: false,

},

// The animation speed

speed: {

  type: [Number, String],

  default: 1

}

```

### Event example

```vue

<template>

  <skycon condition="snow" size="128" paused @load="onLoad" />

</template>

<script>

export default {

  methods: {

    onLoad(player) {

      console.log("loaded");

      setInterval(() => {

        if (player.paused) {

          player.play();

        } else {

          player.pause();

        }

      }, 1000);

    },

  },

};

```

### Animation Speed

The `speed` attributes is a decimal number to control the animation speed. It is a multiplyer to the original speed. `1` means the normal speed. `0.5` means half the normal speed. `2` means twice as fast as the normal speed.

```vue

  

  

  

```