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>
);
git checkout -b my-cool-feature
git commit -am 'feat: add my cool feature'
git push origin my-cool-feature
Author: EmaSuriano
Demo: https://weather-styled-icons.netlify.app/
Source Code: https://github.com/EmaSuriano/weather-styled-icon
#reactjs #react #javascript