https://github.com/andregoncalves/stencil-skycons
st-skycons is a web component built with Stencil that allows you to use the Skycons weather icons as web component
https://github.com/andregoncalves/stencil-skycons
jsx skycons-weather-icons stencil webcomponents
Last synced: 2 months ago
JSON representation
st-skycons is a web component built with Stencil that allows you to use the Skycons weather icons as web component
- Host: GitHub
- URL: https://github.com/andregoncalves/stencil-skycons
- Owner: andregoncalves
- License: mit
- Created: 2018-02-21T12:52:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-28T15:47:03.000Z (over 7 years ago)
- Last Synced: 2025-03-18T14:12:02.979Z (2 months ago)
- Topics: jsx, skycons-weather-icons, stencil, webcomponents
- Language: TypeScript
- Size: 128 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# st-skycons
st-skycons is a web component built with [Stencil](https://stenciljs.com/) that allows you to use the [Skycons weather icons](https://darkskyapp.github.io/skycons/).
## Demo
## Getting Started
To try this component:
```bash
git clone [email protected]:andregoncalves/stencil-skycons.git skycons
cd skycons
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` 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 `` 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:
```js
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'
```