Weather Conditions Icons ☁️

The Weather Conditions Icons npm package is a comprehensive collection of weather icons designed to enhance the visual representation of different weather conditions. This package simplifies the integration of weather icons into your web applications, providing a wide range of symbols that accurately depict various weather phenomena.

Instillations

npm install weather-conditions-icons

Usage

HTML or JavaScript projects.

With the Weather Conditions Icons package, you can easily integrate weather icons into your HTML or JavaScript projects. Here's a basic example using core JavaScript: const weatherIcons = require('weather-conditions-icons');

// Test for getting the default icon
const defaultIcon = weatherIcons.getDefaultIcon();
console.log('Default Icon:', defaultIcon);

// Get the default icon
const defaultIcon = weatherIcons.getDefaultIcon();
console.log('Default Icon:', defaultIcon);

// Get an icon by name
const iconByName = weatherIcons.getIconByName('set-1', 'Thunderstorm with light rain');
console.log('Icon by Name:', iconByName);

// Get an icon by command
const iconByCommand = weatherIcons.getIconByCommand('set-2', 'thunderstorm_with_light_rain');
console.log('Icon by Command:', iconByCommand);

In React

import React from 'react';
import weatherIcons from 'weather-conditions-icons';

const WeatherComponent = ({ condition }) => {
    // Get the default icon
    const defaultIcon = weatherIcons.getDefaultIcon();

    // Get an icon by name
    const iconByName = weatherIcons.getIconByName('set-1', 'Thunderstorm with light rain');

    // Get an icon by command
    const iconByCommand = weatherIcons.getIconByCommand('set-2', 'thunderstorm_with_light_rain');

    return (
        <div>
            <img src={defaultIcon} alt="Default Icon" />
            <img src={iconByName} alt="Icon One" />
            <img src={iconByCommand} alt="Icon Three" />
        </div>
    );
};

export default WeatherComponent;

In Vue

<template>
<div>
    <!-- Get the default icon -->
    <img :src="weatherIcons.getDefaultIcon()" alt="Default Icon" />

    <!-- Get an icon by name -->
    <img :src="weatherIcons.getIconByName('set-2', 'Thunderstorm with light rain')" alt="Icon One" />

    <!-- Get an icon by command -->
    <img :src="weatherIcons.getIconByCommand('set-1', 'thunderstorm_with_light_rain')" alt="Icon Three" />
</div>
</template>

<script>
import weatherIcons from 'weather-conditions-icons';

    export default {
        data() {
            return {
                weatherIcons,
            };
        },
    };
</script>

In Angular

// app.component.ts
import { Component } from '@angular/core';
import weatherIcons from 'your-package-name';

@Component({
selector: 'app-root',
template: `
    <div>
    <!-- Get the default icon -->
    <img [src]="weatherIcons.getDefaultIcon()" alt="Default Icon" />

    <!-- Get an icon by name -->
    <img [src]="weatherIcons.getIconByName('set-1', 'Thunderstorm with light rain')" alt="Icon One" />

    <!-- Get an icon by command -->
    <img [src]="weatherIcons.getIconByCommand('set-2', 'thunderstorm_with_light_rain')" alt="Icon Three" />
    </div>
`,
})
export class AppComponent {
    weatherIcons = weatherIcons;
}

Icons 😊

1. Thunderstorm

1. thunderstorm with light rain
2. thunderstorm with rain
3. thunderstorm with heavy rain
4. light thunderstorm
5. thunderstorm
6. heavy thunderstorm
7. ragged thunderstorm
8. thunderstorm with light drizzle
9. thunderstorm with drizzle
10. thunderstorm with heavy drizzle

SET-1 (Thunderstorm).

| Sno | Name | Command | Icon | |-----|-----------------------------|--------------------------------|-------------------------------------------------------------| | 1 | Thunderstorm with light rain| thunderstorm_with_light_rain | | | 2 | Thunderstorm with rain | thunderstorm_with_rain | | | 3 | Thunderstorm with heavy rain | thunderstorm_with_heavy_rain | | | 4 | Light thunderstorm | light_thunderstorm | | | 5 | Thunderstorm | thunderstorm | | | 6 | Heavy thunderstorm | heavy_thunderstorm | | | 7 | Ragged thunderstorm | ragged_thunderstorm | | | 8 | Thunderstorm with light drizzle | thunderstorm_with_light_drizzle | | | 9 | Thunderstorm with drizzle | thunderstorm_with_drizzle | | | 10 | Thunderstorm with heavy drizzle | thunderstorm_with_heavy_drizzle | |

2. Drizzle

1. light intensity drizzle
2. drizzle
3. heavy intensity drizzle
4. light intensity drizzle rain
5. drizzle rain
6. heavy intensity drizzle rain
7. shower rain and drizzle
8. heavy shower rain and drizzle
9. shower drizzle

SET-1 (Drizzle).

| Sno | Name | Command | Icon | |-----|------------------------------|---------------------------------|-------------------------------------------------------------| | 1 | Light intensity drizzle | light_intensity_drizzle | | | 2 | Drizzle | drizzle | | | 3 | Heavy intensity drizzle | heavy_intensity_drizzle | | | 4 | Light intensity drizzle rain | light_intensity_drizzle_rain | | | 5 | Drizzle rain | drizzle_rain | | | 6 | Heavy intensity drizzle rain | heavy_intensity_drizzle_rain | | | 7 | Shower rain and drizzle | shower_rain_and_drizzle | | | 8 | Heavy shower rain and drizzle | heavy_shower_rain_and_drizzle | | | 9 | Shower drizzle | shower_drizzle | |

3. Rain

1. light rain
2. moderate rain
3. heavy intensity rain
4. very heavy rain
5. extreme rain
6. freezing rain
7. light intensity shower rain
8. shower rain
9. heavy intensity shower rain
10. ragged shower rain

SET-1 (Rain).

| Sno | Name | Command | Icon | |-----|-----------------------------|--------------------------------|-------------------------------------------------------------| | 1 | Light rain | light_rain | | | 2 | Moderate rain | moderate_rain | | | 3 | Heavy intensity rain | heavy_intensity_rain | | | 4 | Very heavy rain | very_heavy_rain | | | 5 | Extreme rain | extreme_rain | | | 6 | Freezing rain | freezing_rain | | | 7 | Light intensity shower rain | light_intensity_shower_rain | | | 8 | Shower rain | shower_rain | | | 9 | Heavy intensity shower rain | heavy_intensity_shower_rain | | | 10 | Ragged shower rain | ragged_shower_rain | |

4. Snow

1. light snow
2. snow
3. heavy snow
4. sleet
5. light shower sleet
6. shower sleet
7. light rain and snow
8. rain and snow
9. light shower snow
10. shower snow
11. heavy shower snow

SET-1 (Snow).

| Sno | Name | Command | Icon | |-----|------------------------|-------------------------|-----------------------------------------------------------| | 1 | Light snow | light_snow | | | 2 | Snow | snow | | | 3 | Heavy snow | heavy_snow | | | 4 | Sleet | sleet | | | 5 | Light shower sleet | light_shower_sleet | | | 6 | Shower sleet | shower_sleet | | | 7 | Light rain and snow | light_rain_and_snow | | | 8 | Rain and snow | rain_and_snow | | | 9 | Light shower snow | light_shower_snow | | | 10 | Shower snow | shower_snow | | | 11 | Heavy shower snow | heavy_shower_snow | |

5. Atmosphere

1. mist
2. smoke
3. haze
4. sand_dust whirls
5. fog
6. sand
7. dust
8. volcanic ash
9. squalls
10. tornado

SET-1 (Atmosphere).

| Sno | Name | Command | Icon | |-----|----------------------|---------------------|---------------------------------------------------| | 1 | Mist | mist | | | 2 | Smoke | smoke | | | 3 | Haze | haze | | | 4 | Sand/dust whirls | sand_dust_whirls | | | 5 | Fog | fog | | | 6 | Sand | sand | | | 7 | Dust | dust | | | 8 | Volcanic ash | volcanic_ash | | | 9 | Squalls | squalls | | | 10 | Tornado | tornado | |

6. Clear

1. clear sky

SET-1 (Clear).

| Sno | Name | Command | Icon | |-----|--------------|----------|-----------------------------------------------| | 1 | Clear sky | clear_sky | |

7. Clouds

1. few clouds: 11-25%
2. scattered clouds: 25-50%
3. broken clouds: 51-84%
4. overcast clouds: 85-100%

SET-1 (Clouds).

| Sno | Name | Command | Icon | |-----|-----------------------------|--------------------|-----------------------------------------------------| | 1 | Few clouds: 11-25% | few_clouds | | | 2 | Scattered clouds: 25-50% | scattered_clouds | | | 3 | Broken clouds: 51-84% | broken_clouds | | | 4 | Overcast clouds: 85-100% | overcast_clouds | |