npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

weather-icons-animated

v1.0.1

Published

A series of hand crafted and detailed weather icons animated with react & emotion.js

Downloads

100

Readme

Animated React Weather Icons

These are a series of highly detailed & crafted animations for Weather Icons to use in any smarthome project or any web application using React.

I've designed these to work with the Home Assistant & my other project ha-component-kit but they can be used in any React project.

Each state will render a different SVG, to swap out the svg it's as simple as changing the attribute on the SVG.

Highly configurable animations & styles - very structured so it's easy to make changes if need be.

The SVG construction is based of SVG symbols so it's really easy to compose another "state" if you want to add another one.

DEMO

Help me out?

As you can probably tell, A lot of time has gone into this! I'd really appreciate a small donation as it will help me validate that my time is well spent and will guarantee future additional changes :) Buy me a coffee!

How can i use this in my project?

Simply install, and then import into your react project.

npm install weather-icons-animated -D

Application usage:

import { WeatherSvg } from "weather-icons-animated";
export function App() {
   return <WeatherSvg state="sunny" width={100} height={100} />
}

Resizing

By default, the svg's will scale to fit the parent div, however you can specify a width/height as a prop like so:

<WeatherSvg state="sunny" width={100} height={100} />

Or you can re-style with emotion:

import { WeatherSvg as _WeatherSvg } from "./WeatherSvg";
import styled from "@emotion/styled";
const WeatherSvg = styled(_WeatherSvg)`
  width: 200px;
  height: 200px;
`;
export function App() {
   return <WeatherSvg state="sunny" />;
}

Contributors

To run locally, simply run npm install && npm run dev to spin up the local server with the fully demo.

By default the svg will render at a 200x200 viewport, but you can pass in a width/height prop to change this.

The SVG's are currently styled with emotion, which makes it very easy to make further changes to the SVG's.

There's full typescript intellisense on the available state's the SVG animations support, here's a simple example of using the component:

import { WeatherSvg } from "weather-icons-animated";
function App() {
  return (
    <WeatherSvg state="sunny" />
  )
}
export default App

State Support

It supports the following weather "states":

  • sunny
  • clear-night
  • partlycloudy
  • cloudy
  • fog
  • hail
  • rainy
  • snowy
  • snowy-rainy
  • pouring
  • lightning
  • lightning-rainy
  • windy
  • windy-variant