Weather Icon

# Brok UI: Weather Icon (`weather-icon`)

One stroked glyph per weather condition (clear, clouds, rain, snow, fog, storm) in four sizes, decorative by default and labelled on request.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add weather-icon
```

## Usage

```blade
<div class="flex flex-col gap-6">
    <div class="flex flex-wrap items-center gap-6 text-muted-foreground">
        @foreach (['clear', 'clouds', 'rain', 'snow', 'fog', 'storm'] as $condition)
            <div class="flex flex-col items-center gap-2">
                <x-ui.weather-icon :condition="$condition" size="lg" :label="__(ucfirst($condition))" />
                <span class="text-xs">{{ __(ucfirst($condition)) }}</span>
            </div>
        @endforeach
    </div>
    <div class="flex items-end gap-4 text-foreground">
        <x-ui.weather-icon condition="rain" size="sm" />
        <x-ui.weather-icon condition="rain" size="md" />
        <x-ui.weather-icon condition="rain" size="lg" />
        <x-ui.weather-icon condition="rain" size="xl" />
    </div>
</div>
```

## Props

- `condition` (clear|clouds|rain|snow|fog|storm, default `clear`) — Which glyph to draw. Unknown values fall back to clear.
- `size` (sm|md|lg|xl, default `md`) — 16 / 24 / 40 / 64px.
- `label` (string|null, default `null`) — Accessible name. Without it the icon is aria-hidden; with it the svg becomes role="img".

## Use when

- Use to summarize, sequence, or present data so users can scan it quickly.
- Naming a weather condition with a glyph in a forecast, a status card or a dashboard tile.
- Several tiles need the same condition set: compose this instead of copying the path map.

## Avoid when

- Do not add display-only ornament when the user needs actionable structure or exact comparison instead.
- The icon is not a weather condition — use <x-ui.icon>.
- You need animated or coloured weather art; this is a line glyph in currentColor.

## Anti-patterns

- Adding display ornament without informational value

## Rules

- Use the `<brok:weather-icon>` tag (or `<x-ui.weather-icon>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/weather-icon
- Registry JSON (files, props, contract): https://brokui.dev/r/open/weather-icon.json

@props([
    'condition' => 'clear',
    'size' => 'md',
    'label' => null,
])

{{--
    Weather icon: one stroked glyph per condition, so the seven weather widgets
    stop carrying the same six-entry path map each. Decorative by default
    (aria-hidden); pass `label` when the icon is the only thing that names the
    condition and it becomes role="img" with that accessible name.
--}}
@php
    $glyphs = [
        'clear' => '<path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M2 12h2"/><path d="M12 20v2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 19.07-1.41-1.41"/><circle cx="12" cy="12" r="4"/>',
        'clouds' => '<path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/>',
        'rain' => '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/>',
        'snow' => '<path d="m2 8 20 8"/><path d="m2 16 20-8"/><path d="m12 2 0 20"/><path d="M22 12 2 12"/>',
        'fog' => '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17H7"/><path d="M17 21H9"/>',
        'storm' => '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="m13 12-3 5h4l-3 5"/>',
    ];

    $condition = array_key_exists($condition, $glyphs) ? $condition : 'clear';

    $sizes = [
        'sm' => 'size-4',
        'md' => 'size-6',
        'lg' => 'size-10',
        'xl' => 'size-16',
    ];
    $size = array_key_exists($size, $sizes) ? $size : 'md';
@endphp

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    data-slot="weather-icon"
    data-condition="{{ $condition }}"
    data-size="{{ $size }}"
    @if ($label !== null) role="img" aria-label="{{ $label }}" @else aria-hidden="true" @endif
    {{ $attributes->merge(['class' => 'shrink-0 '.$sizes[$size]]) }}
>{!! $glyphs[$condition] !!}</svg>