Element · 6 Varianten
Icon-Feld
elements/IconFeld.astro
Container um ein Icon: Quadrat-Fond, Pille, Haarlinie, invers. Dazu Größen 16, 20, 32 neben dem Bestand 24.
Notizen
- Bestand: Icon sm 24, lg 64, xl 96. Kein Container. Kleinere Größen für Inline und Tag fehlen.
- Radien-Regel: Pille = full, Fläche = none. Rounded-Container (sm–xl) bewusst nicht, das ist Medien und Input vorbehalten.
- Wenn Approved: Icon-Element bekommt size xs 16 / md 32, Container wird Komponente IconField.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "quadrat" | "pille" | "haarlinie" | "invers" | "groessen" | "inline" | "quadrat" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<IconFeld variant="quadrat" surface="nacht" />01 · Quadrat
Fond 48
Karten-Fond. granit-100 / 900.
Nacht
Paper
02 · Pille
rounded-full
Button. Nur hier rund.
Nacht
Paper
03 · Haarlinie
1px Kante
Linien. Kein Fond.
Nacht
Paper
04 · Invers
Deckel
Ebenen. Icon in Gegenfarbe.
Nacht
Paper
05 · Größen
16 · 20 · 24 · 32
Anfrage. Skaliert über Wrapper.
Nacht
16 20 24 32
Paper
16 20 24 32
06 · Inline
Im Satz, 20 px
Tag, Meta. Baseline-nah.
Nacht
Ein Slot, im Satz, 20 px.
Paper
Ein Slot, im Satz, 20 px.