10 Animated Weather Icon Components For Vue – Skycons

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:

10 Animated Weather Icon Components For Vue - Skycons

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
Tags:

Add Comment