Svelte Weather

Svelte-Weather

210+ SVG weather icons for Svelte. Svlete-Weather-Icons support major CSS framework. You can add additional CSS using the class props.

Installation

npm i svelte-weather

Icon names

Icon names

Icon images

Icon images

REPL

• Demo 1
• Demo 2

Usage

<script>import {DayCloudy} from "svelte-weather";</script>

Props

Size

Use the size prop to change the size of icons.

<DayCloudy size="30" />
<DayCloudy size="40" />
<DayCloudy size="50" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<DayCloudy color="#ff0000" /> <DayCloudy color="#00ffd8" />

CSS framework support

Use the class prop to change colors and add additional css.

For example, Tailwind CSS:

<DayCloudy class="text-pink-700 mr-4" />

If you use the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let's use dark for the dark mode class as an example.

<DayCloudy class="text-pink-700 dark:text-blue-300" />

Bootstrap example:

<DayCloudy class="position-absolute top-0 px-1" />

aria-label

All icons have aria-label. For example DayCloudy has aria-label="day cloudy". Use ariaLabel prop to modify the aria-label value.

<DayCloudy ariaLabel="day cloudy icon" class="text-red-500"></DayCloudy>

Passing down other attributes

You can pass other attibutes as well.

<DayCloudy tabindex="0"></DayCloudy>

Import all

Use import * as Icon from 'svelte-weather.

<script>
  import * as Icon from 'svelte-weather';
</script>

<Icon.DayCloudy size="30" class="text-red-500" />
<Icon.DirectionRight size="40" class="text-blue-700" />
<Icon.Hail size="50" class="text-green-700" />
<Icon.MoonAltWaningGibbous2 size="60" class="text-purple-500" />
<Icon.NightAltSleet size="100" class="text-purple-500" tabindex="0" />

Original source

erikflowers/weather-icons

Other icons

• Svelte-Icon-Sets

PWA: Fast & Offline

This website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".