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: about 1 year 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 (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-14T13:25:12.000Z (over 1 year ago)
- Last Synced: 2025-03-28T00:24:15.606Z (about 1 year 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
[](http://npmjs.com/package/vue-skycons)
[](http://npmjs.com/package/vue-skycons)
[](https://raw.githubusercontent.com/dipu-bd/vue-skycons/master/package.json)
[](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.
## 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
```