⛅️☀️🌧🌨in ⚛️
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
config
docs
src
stories
tests
.eslintignore
.eslintrc.json
.gitignore
.travis.yml
CONTRIBUTING.md
README.md
nwb.config.js
package.json
yarn.lock

README.md

weather-styled-icon

Greenkeeper badge NPM Version Build Status Coveralls Storybook eslint

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

npm install weather-styled-icon

Usage example

The library exports in total 4 icons, each one can be configurable by props:

Sunny

<Sunny size={1} />

Cloudy

<Cloudy
  size={1}
  patchy // Show the sun at a side of the cloud
/>

Rain

<Rain
  size={1}
  patchy // Show the sun at a side of the cloud
  lighting // Show rays instead of drops falling of the cloud
/>

Snow

<Snow
  size={1}
  patchy // Show the sun at a side of the cloud
/>

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 {
  WeatherThemeProvider,
  Sunny,
  Rain,
  Snow,
  Cloudy,
} from 'weather-styled-icons';

const theme = {
  cloudsColor: 'MidnightBlue',
  dropsColor: 'white',
  boltColor: 'lightBlue',
  backgroundColor: 'Lavender',
  sunColor: 'Orange',
  raysColor: 'OrangeRed',
};

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

Edit weather-styled-icon-theming

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