10 Animated Weather Icon Components For Vue - Skycons

Install & Download:

# Yarn
$ yarn add vue-skycons
# NPM
$ npm i vue-skycons --save

Description:

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
}