README

weather-styled-icon

Animated and configurable weather icons made in React ⚛️, using styled-components 4 💅 and CSS3 Animations.

Check this Storybook to try them!

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

Weather styled Icon

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 Storybook.

Theming

All the icons of the library are easy to style. Just by rendering WeatherThemeProvider before the use of the icons, they will pick the pallete from the theme.

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

const theme = {
  backgroundColor: 'Lavender',
  sunColor: 'Orange',
  raysColor: 'OrangeRed',
};

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

Licence

MIT.

Contributing

Fork it (https://github.com/EmaSuriano/weather-styled-icon/fork)
Create your feature branch (git checkout -b feature/fooBar)
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request

Usage no npm install needed!