https://github.com/eklem/yr-icons

Weather symbols from Yr.no's weather forecast api. Delivered as monochrome Web font.
https://github.com/eklem/yr-icons

Last synced: 22 days ago
JSON representation

Weather symbols from Yr.no's weather forecast api. Delivered as monochrome Web font.

• Host: GitHub
• URL: https://github.com/eklem/yr-icons
• Owner: eklem
• License: mit
• Created: 2020-01-05T06:43:41.000Z (almost 5 years ago)
• Default Branch: trunk
• Last Pushed: 2022-11-18T06:27:01.000Z (almost 2 years ago)
• Last Synced: 2024-09-13T23:11:33.112Z (about 2 months ago)
• Language: CSS
• Homepage:
• Size: 2.29 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Yr-icons

Icon set for weather data provided by [Yr.no](https://api.met.no/weatherapi/locationforecast/2.0/). Developed for monochrome e-paper/e-ink screens in mind. Heavily inspired by [Matmonsen/yr-icons](https://github.com/Matmonsen/yr-icons/). Used to be a fork.

[More information about the different weather symbols](https://hjelp.yr.no/hc/no/articles/203786121-V%C3%A6rsymbolene-p%C3%A5-Yr-) and [wind arrows](https://hjelp.yr.no/hc/no/articles/360002022134-Vindpiler-og-Beaufortskalaen). [Warning icons](https://hjelp.yr.no/hc/no/articles/360014052634-Farevarselikonene-p%C3%A5-Yr) may be developed later. [Create an issue](https://github.com/eklem/yr-icons/issues/new/choose) if there is something additional you need.

## Installation

Install from NPM

```console

npm i yr-icons

```

Reference the main css file

```html

  

```

CDN

```html

  

```

## Usage

Yr's location forecast outputs weather summaries like `clearsky_day` or `lightssnowshowersandthunder_day`. The weather icons have matching CSS class references for easy integration. HTML example:

```html

  

  

  

```

The wind arrows follows the Beaufort scale, which needs a translation from meters/second that the same Yr API outputs. The good part is that wind direction is easily translated from Yr's API. The only thing you need to do is to round the number to the closest integer.

```html

  

  

  

```

## Icons

![Icons overview](https://raw.githubusercontent.com/eklem/yr-icons/trunk/icons-overview.png)

[HTML example for all weather and wind icons and css classes](https://eklem.github.io/yr-icons/example.html).

[License](https://github.com/eklem/yr-icons/blob/trunk/LICENSE)