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'