⚠️ This project is no longer maintained due to the a new library for weather icons was released based on only CSS, and I don't see any benefit on using this instead of that.

Animated and configurable weather icons made in React, using styled-components 💅 and CSS Animations.

Live Demo ✨

Icons and styles were taken from this Codepen, please leave him a start 🌟

> yarn add styled-components weather-styled-icon

import React from 'react';
import { Sunny, Cloudy, Rain, Snow } from 'weather-styled-icon';

const App = () => (
  <div>
    <Sunny />
    <Cloudy />
    <Rain />
    <Snow />
  </div>
);

For more examples and usage, please refer to the Docs page.

Given all the icons are using styled-components, theming is quite easy to do. You can import WeatherThemeProvider from the library, which comes with the default colors already set up, and by providing a new theme object you can override them. You can find the theme structure in this file.

import React from 'react';
import { WeatherThemeProvider, Sunny, Rain } from 'weather-styled-icons';

const myCustomTheme = {
  sunColor: 'Orange',
  raysColor: 'OrangeRed',
};

const App = () => (
  <WeatherThemeProvider theme={myCustomTheme}>
    <Sunny />
    <Rain />
  </WeatherThemeProvider>
);

1. Fork this project: https://github.com/EmaSuriano/weather-styled-icon/fork
2. Create your feature branch: git checkout -b my-cool-feature
3. Commit your changes: git commit -am 'feat: add my cool feature'
4. Push the changes to your repository: git push origin my-cool-feature
5. Create a new Pull Request: https://github.com/EmaSuriano/weather-styled-icon/compare

MIT.