Svelte Weather Icons

This is a simple component library that makes it as easy as can be to load any of the 219 amazing weather icons created by Erik Flowers.

All of the icons used are his. I did not create them. This is just a svelte component to make them incredibly easy to use.

Usage

Both the loader component and the icons are included in this package. The loader is imported using the following code:

import { SvelteWeather } from "svelte-weather-icons";

To load an icon such as Alien, simply add it to the imports object:

import { SvelteWeather, Alien } from "svelte-weather-icons";

All icons can be viewed here. The names used in this library are different than those on Erik's website. All of the wi prefixes and dashes have been removed. E.g. wi-day-cloudy-windy becomes DayCloudyWindy.

The component has 3 props available to the user; color, size, and d.

• Color: String
  • E.g. #12bf00
• Size: String
  • E.g. 4em
• d: Object
  • E.g. Tsunami

An example of implementing this component is as follows:

<SvelteWeather color="#12bf00" size="4em" d={Tsunami} />