Animated and configurable weather icons made in React

weather-styled-icon

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

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

Installation

> yarn add styled-components weather-styled-icon

Usage example

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.

Theming

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>
);

Contributing

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

Download Details:

Author: EmaSuriano

Demo: https://weather-styled-icons.netlify.app/

Source Code: https://github.com/EmaSuriano/weather-styled-icon

#reactjs #react #javascript