Skycons is a JavaScript library that allows you to use Skycons animated weather icons as components.
How to use it:
1. Import and register the Skycons component.
import Vue from "vue";
import Skycon from "vue-skycons";
Vue.component("skycon", Skycon);
2. Add icons as components to the app.
<skycon condition="clear-day" /> <skycon condition="clear-night" /> <skycon condition="partly-cloudy-day" /> <skycon condition="partly-cloudy-night" /> <skycon condition="cloudy" /> <skycon condition="rain" /> <skycon condition="sleet" /> <skycon condition="snow" /> <skycon condition="wind" /> <skycon condition="fog" />
3. Available props.
// 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
}
Preview:
Changelog:
v4.2.0 (03/19/2022)
- Add animation speed control
Download Details:
Author: dipu-bd
Live Demo: https://dipu-bd.github.io/vue-skycons/
Download Link: https://github.com/dipu-bd/vue-skycons/archive/refs/heads/master.zip
Official Website: https://github.com/dipu-bd/vue-skycons
Install & Download:
# Yarn
$ yarn add vue-skycons
# NPM
$ npm i vue-skycons --save