st-skycons is a web component built with Stencil that allows you to use the Skycons weather icons.
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
- 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
- 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
- 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
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 |
You can change the icon, play and pause the animation:
element = document.querySelector('st-skycons');
element.setAttribute('icon', 'RAIN');
element.pause();
element.play();
'CLEAR_DAY'
'CLEAR_NIGHT'
'PARTLY_CLOUDY_DAY'
'PARTLY_CLOUDY_NIGHT'
'CLOUDY'
'RAIN'
'SLEET'
'SNOW'
'WIND'
'FOG'