# WeatherIcon

**When to use:** An animated weather symbol for a forecast, a dashboard widget or a day selector, one per condition a forecast reports. For a static pictogram of anything else, use a FontAwesome icon.

**Keywords:** forecast, rain, snow, sun, cloud, storm, climate, meteo

**Import:** `import { WeatherIcon, WeatherType } from '@ahrowe/ui'`  
**Types:** `import type { WeatherIconProps, WeatherIconLabels } from '@ahrowe/ui'`

```tsx
import { WeatherIcon, WeatherType } from '@ahrowe/ui';

<WeatherIcon type={WeatherType.Rainy} />

// Any CSS size; a number is pixels
<WeatherIcon type={WeatherType.Snowy} size='3em' />

// A still frame, for small or repeated icons such as a row of days
<WeatherIcon type={WeatherType.PartlyCloudy} size={32} animated={false} />
```

**Enums:** `WeatherType`: `Sunny` · `ClearNight` · `Cloudy` · `PartlyCloudy` · `PartlyCloudyNight` · `RainyLight` · `Rainy` · `RainyHeavy` · `Snowy` · `Hail` · `Foggy` · `Thunderstorm`

**Your API's own enum works as it is.** `type` takes the enum or its string value (`'rainy'`, `'partlyCloudy'`), so a backend enum with the same values passes without a mapping, even though TypeScript treats two enums as different types.

**Colour** is the text colour it sits in (`currentColor`), like any icon. Set `color` on it or on a parent:

```tsx
<WeatherIcon type={WeatherType.Sunny} style={{ color: 'var(--warn-color)' }} />
```

**Motion.** Clouds drift, rain and snow fall, hail bounces, lightning flashes twice every four seconds. Under `prefers-reduced-motion` it draws the same still frame as `animated={false}`: each drop, flake and stone frozen at a different point of its fall rather than all bunched under the cloud. `animated={false}` is also worth setting on a long row of small icons, where the motion is too small to see but costs the same. Set it app-wide through `ConfigProvider`.

**Accessibility.** The svg is `role="img"` and named after the weather ("Heavy rain"). Where the text next to it already says the same, pass `aria-hidden`.

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `type` | `WeatherType \| string value` | The weather to draw (required) |
| `size` | `number \| string` | Width and height. A number is pixels (default `64`) |
| `animated` | `boolean` | `false` draws a still frame (default `true`). Always still under reduced motion |
| `labels` | `WeatherIconLabels` | The accessible name of each weather |

The native svg attributes (`className`, `style`, `aria-*`, `data-*`, handlers) reach the `<svg>`.

**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ WeatherIcon: { animated: false } }}`. See [ConfigProvider.md](ConfigProvider.md).

**Labels:** one key per `WeatherType` value, `sunny` to `thunderstorm`: the accessible name of each weather. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `WeatherIconLabels`.