Weather-react-icons NPM

weather-react-icons

npm npm bundle size

A React component for weather icons for use with Open Weather and Yahoo Weather APIs.

Installaion

$ npm i weather-react-icons

Usage

import * as React from 'react';
// The following CSS file must be installed for use of WeatherIcon.
import 'weather-react-icons/lib/css/weather-icons.css';
import { WeatherIcon } from 'weather-react-icons';

const Weather = () => {
  return <WeatherIcon iconId={200} name="owm" night />;
};

WeatherIcon Params

Name	Type	Required?	default	Description
iconId	number	Required		Icon Id that OpenWeatherMap and Yahoo Weather API provides.
name	`owm` or `yahoo`	Required		API name you use.
night	boolean	Optional	false	If sets true, icons change to night icons. (note: night is only for "owe" icons)
className	string	Optional		Your own className.

CSS usage

if only use CSS files, import them as follows,

import 'weather-react-icons/lib/css/weather-icons.css';
import 'weather-react-icons/lib/css/weather-icons-wind.css';

Resources

Open Weather API : A scientific yet simple approach to weather forecast. Free. No ads.
Yahoo Weather API : Get up-to-date weather information for any location, including 10-day forecast, wind, atmosphere, astronomy conditions, and more. You can lookup weather by location (city name) or lat/long.
Weather icons : The repository is created by @erikflowers