tuix-icon
Das Icon-Set, gerendert als Inline-SVG.
tuix-icon zeichnet ein Icon aus dem eingebauten Set als Inline-SVG. Das Set ist
geschlossen: ein unbekannter name rendert nichts.
Alle Namen stehen im Icon-Katalog.
Grössen
Vier Boxgrössen. full übernimmt die Grösse des Elternelements, so
dimensionieren die Formularelemente ihre Icons.
| Wert | Attribut | Box |
|---|---|---|
IconSizeVariant.SMALL | small | 16px |
IconSizeVariant.MEDIUM | medium | 24px |
IconSizeVariant.LARGE | large | 32px |
IconSizeVariant.FULL | full | 100% des Elternelements |
Farben
color nimmt drei Arten von Werten an, in dieser Reihenfolge geprüft:
Eine TextVariant wie error oder section, aufgelöst über die helle oder
dunkle Palette, je nach dark.
Palette wie PRIMARY_600, aufgelöst über die helle Palette.#585A9D oder rgb(88 90 157).Füllung
Die Icons sind Konturen auf einem transparenten <svg fill="none">, color
allein zeichnet also eine Kontur. fill ersetzt dieses none mit: es füllt die
von der Kontur umschlossene Fläche, während color weiterhin die Kontur selbst
zeichnet. Das gilt für jedes Icon, nicht für eine Teilmenge. Wo ein Pfad offen
ist, etwa beim Haken von circle-check, wird die Fläche gefüllt, die der Pfad
andeutet.
API
Properties
| Property | Attribut | Typ | Standard | Beschreibung |
|---|---|---|---|---|
name | name | IconName | arrow-down | Welches Icon gezeichnet wird |
size | size | IconSizeVariant | small | Boxgrösse |
color | color | TextVariant | Palette-Schlüssel | CSS-Farbe | primary | Farbe der Kontur |
fill | fill | TextVariant | Palette-Schlüssel | CSS-Farbe | Keine | Füllfarbe der umschlossenen Fläche |
dark | dark | boolean | false | Eine TextVariant-Farbe über die dunkle Palette auflösen |
Das Element feuert keine Events und hat keine Slots.
Hinweise
- Das Icon ist
display: blockund füllt seine Box; für die Ausrichtung neben Text gehört es in einen Flex-Container. tuix-iconverarbeitet selbst keine Klicks. Für ein interaktives Icon gibt es tuix-icon-button, einen echten<button>.