Skip to content
GitHub

Weather Icon

A Icon Component to display the Weather

import { WeatherIcon } from "@/components/ui/pxl/weather-icon";


export default function WeatherIconDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-2.5">
      <WeatherIcon className="size-12" code={2} />
      <WeatherIcon className="size-12" code={2} dayPhase="night" />
    </div>
  );
}

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/weather-icon

Usage

Section titled “Usage”
import { WeatherIcon } from "@/components/ui/pxl/weather-icon"
<WeatherIcon code={code} dayPhase="night" />

Codes

Section titled “Codes”
#00SunnyClear
#01Mainly SunnyMainly Clear
#02Partly CloudyPartly Cloudy
#03CloudyCloudy
#45FoggyFoggy
#48Rime FogRime Fog
#51Light DrizzleLight Drizzle
#53DrizzleDrizzle
#55Heavy DrizzleHeavy Drizzle
#56Light Freezing DrizzleLight Freezing Drizzle
#57Freezing DrizzleFreezing Drizzle
#61Light RainLight Rain
#63RainRain
#65Heavy RainHeavy Rain
#66Light Freezing RainLight Freezing Rain
#67Freezing RainFreezing Rain
#71Light SnowLight Snow
#73SnowSnow
#75Heavy SnowHeavy Snow
#77Snow GrainsSnow Grains
#80Light ShowersLight Showers
#81ShowersShowers
#82Heavy ShowersHeavy Showers
#85Light Snow ShowersLight Snow Showers
#86Snow ShowersSnow Showers
#95ThunderstormThunderstorm
#96Light Thunderstorms With HailLight Thunderstorms With Hail
#99Thunderstorm With HailThunderstorm With Hail
import type { WMO4677Code } from "weather-i18n/wmo_4677";
import getWeatherCodeI18n from "weather-i18n/wmo_4677/i18n";


import { WeatherIcon } from "@/components/ui/pxl/weather-icon";


const t = getWeatherCodeI18n("en");


export default function WeatherIconCodes() {
  return (
    <div className="flex flex-col gap-2">
      <table>
        <tbody>
          {Array(100)
            .fill(null)
            .map((_, idx) => {
              const code = idx as WMO4677Code;


              const label = t(code);


              if (!label) {
                return null;
              }


              return (
                <tr key={idx.toString()} className="text-muted-foreground hover:text-foreground">
                  <th className="px-1 font-mono font-normal">#{idx.toString().padStart(2, "0")}</th>
                  <th className="px-1 font-normal truncate">{label}</th>
                  <th className="px-1 font-normal">
                    <WeatherIcon className="size-4" code={code} />
                  </th>
                  <th className="px-1 font-normal truncate">{t(code, "night")}</th>
                  <th className="px-1 font-normal">
                    <WeatherIcon
                      className="size-4 "
                      code={code}
                      dayPhase="night"
                    />
                  </th>
                </tr>
              );
            })}
        </tbody>
      </table>
    </div>
  );
}