This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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 🌟

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

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