Notorious Penguin Magicians

    @johnmmackey/weather-underground-icons

    1.0.1 • Public • Published

    Buy Me Coffee

    Weather Underground Icons

    These icons were created by the Graphic Designer Ashley Jager. She released these icons in a beautiful Adobe Illustrator file. This project simply breaks that AI file up into web friendly icons that can be used in your projects.

    tstorms

    Demo Website

    http://peter.build/weather-underground-icons/

    Example Application

    Here is an Example Application that uses these icons. You can access the Github Repo for source code.

    Usage Instructions

    Weather Underground has an API where you can fetch data remotely. The API returns an icon parameter as part of their JSON response that you can use to load custom icons.

    Image Usage Instructions

    If you just want to use the image files directly, and not use the CSS file you can just copy over the images directly from the dist/icons folder. See the Icon Key below to see which icons will be used.

    CSS Usage Instructions

    If you wish to use the use the CSS version of this project, you just need to copy this dist folder into your project.

    Then you can use the icon keys with a wu- prefix to load whichever icon you want:

    <i class="wu wu-white wu-64 wu-chanceflurries"></i>

    All CSS Icons will default to using SVG files. However, you can use PNG sprites by adding a no-svg class to the parent element that contains the weather icons. no-svg classnames will be added to your HTML tag automatically if you are using Modernizr and the browser does not support SVG.

    Icon Class Colors:

    • wu-black icons with black lines
    <i class="wu wu-black wu-32 wu-chanceflurries"></i>

    tstorms

    • wu-white icons with white lines
    <i class="wu wu-white wu-32 wu-chancerain"></i>

    tstorms

    Icon Class Day & Night:

    • Default is to use Day Icons
    <i class="wu wu-black wu-32 wu-clear"></i>

    clear

    • wu-night to use Night Icons
    <i class="wu wu-white wu-32 wu-clear wu-night"></i>

    clear

    Icon Class Sizes:

    • wu-16 16x16px icons
    <i class="wu wu-black wu-16 wu-chancesnow"></i>

    chancesnow

    • wu-32 32x32px icons
    <i class="wu wu-black wu-32 wu-chancetstorms"></i>

    chancetstorms

    • wu-64 64x64px icons
    <i class="wu wu-black wu-64 wu-clear"></i>

    clear

    • wu-128 128x128px icons
    <i class="wu wu-black wu-128 wu-cloudy"></i>

    cloudy

    • wu-256 256x256px icons
    <i class="wu wu-black wu-256 wu-flurries"></i>

    flurries

    Day Icon Key

    Here are the icon options for each weather option:

    ICON KEY DESCRIPTION
    chanceflurries chanceflurries Chance of Flurries
    chancerain chancerain Chance of Rain
    chancesleet chancesleet Chance Freezing Rain
    chancesnow chancesnow Chance of Snow
    chancetstorms chancetstorms Chance of Thunderstorms
    clear clear Clear
    cloudy cloudy Cloudy
    flurries flurries Flurries
    fog fog Fog
    hazy hazy Haze
    mostlycloudy mostlycloudy Mostly Cloudy
    mostlysunny mostlysunny Mostly Sunny
    partlycloudy partlycloudy Partly Cloudy
    partlysunny partlysunny Partly Sunny
    rain rain Rain
    sleet sleet Freezing Rain
    snow snow Snow
    sunny sunny Sunny
    tstorms tstorms Thunderstorms
    unknown unknown Unknown

    Night Icon Key

    Here are the icon options for each weather option:

    ICON KEY DESCRIPTION
    chanceflurries chanceflurries Chance of Flurries
    chancerain chancerain Chance of Rain
    chancesleet chancesleet Chance Freezing Rain
    chancesnow chancesnow Chance of Snow
    chancetstorms chancetstorms Chance of Thunderstorms
    clear clear Clear
    cloudy cloudy Cloudy
    flurries flurries Flurries
    fog fog Fog
    hazy hazy Haze
    mostlycloudy mostlycloudy Mostly Cloudy
    mostlysunny mostlysunny Mostly Sunny
    partlycloudy partlycloudy Partly Cloudy
    partlysunny partlysunny Partly Sunny
    rain rain Rain
    sleet sleet Freezing Rain
    snow snow Snow
    sunny sunny Sunny
    tstorms tstorms Thunderstorms
    unknown unknown Unknown

    Day Icon Preview

    White Day Icons

    Black Day Icons

    White Day Icons

    Black Day Icons

    Night Icon Preview

    White Night Icons

    Black Night Icons

    White Day Icons

    Black Day Icons

    Install

    npm i @johnmmackey/weather-underground-icons

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    (MIT OR GPL-3.0)

    Unpacked Size

    11 MB

    Total Files

    1021

    Last publish

    Collaborators

    • johnmmackey