andregoncalves/stencil-skycons

st-skycons is a web component built with Stencil that allows you to use the Skycons weather icons as web component

st-skycons

st-skycons is a web component built with Stencil that allows you to use the Skycons weather icons.

Demo

Getting Started

To try this component:

git clone [email protected]:andregoncalves/stencil-skycons.git skycons
cd skycons
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• Put <script src='https://unpkg.com/stencil-skycons@latest/dist/skycons.js'></script> in the head of your index.html
• Then you can use the component

Node Modules

• Run npm install stencil-skycons --save
• Put a script tag similar to this <script src='node_modules/stencil-skycons/dist/skycons.js></script> in the head of your index.html
• Then you can use the element <st-skycons> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-skycons --save
• Add { name: 'stencil-skycons' } to your collections
• Then you can use the element <st-skycons> anywhere in your template, JSX, html etc

Parameters

Attribute	Default	Description
width	64	Canvas width
height	64	Canvas height
icon	''	The icon, see available icons below
color	black	The icon color
autoplay	true	The animation auto starts

Methods

You can change the icon, play and pause the animation:

element = document.querySelector('st-skycons');
element.setAttribute('icon', 'RAIN');
element.pause();
element.play();

Available Icons

'CLEAR_DAY'
'CLEAR_NIGHT'
'PARTLY_CLOUDY_DAY'
'PARTLY_CLOUDY_NIGHT'
'CLOUDY'
'RAIN'
'SLEET'
'SNOW'
'WIND'
'FOG'