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 π
> 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>
);
- 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
MIT.