Icon Symbol
Einführung
Ein leichtgewichtiger, größen- und farbbewusster Wrapper für SVG-Formen. Er erzwingt konsistente Begrenzungsabmessungen, erbt currentcolor, sodass Formen automatisch benachbarte Textdesigns abgleichen, ohne aufgeblähte externe Icon-Pakete zu kompilieren, und unterstützt sowohl dekoratives Ausblenden als auch explizites Labeling für Screenreader.
Die Icon-Komponente ist vollständig als icon-Block im Page Builder integriert und ermöglicht es Sveltia-CMS-Managern, benutzerdefinierte Vektorenpfade zu injizieren, Viewports anzupassen und Skalierungseinstellungen direkt innerhalb von Seitenlayouts zu ändern.
Verwendung
Diese Konfigurationen zeigen genau, wie Page-Builder-Block-Elemente konstruiert werden.
1. Minimaler Pfeil-Indikator (Mittlere Größe)
Bietet einen standardisierten Vektorpfeil, nützlich zum Ausrichten neben Kartenüberschriften, Linklisten oder Formularschaltflächen.
{
"type": "icon",
"svg": "<path d=\"M5 12h14M12 5l7 7-7 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "md"
}
2. Akzentuierter Funktionskategorie-Marker (Große Skala)
Rendert ein größeres Grafik-Icon, das eine Funktion, einen Tarifvorteil oder einen Marketing-Kategorieblock darstellt.
{
"type": "icon",
"svg": "<path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "lg"
}
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Vektorgrafik-Markup (svg) | string | - | Rohes vektorielles Inneres-SVG-Markup (z. B. <path d="..." />, <circle cx="..." />). |
Viewport-Begrenzungsrahmen (viewBox) | string | "0 0 24 24" | Teilt dem Browser die Koordinatenskalierung mit. Stimmt normalerweise mit den Quell-SVG-Designs überein. |
Skalierungsgröße (size) | select | "md" | Standardisierte visuelle Dimensionen-Skala. • Optionen: "2xs", "xs", "sm", "md", "lg", "xl". |
Füllregel (fill) | string | "currentColor" | Hinterlegte Füllregel. Auf "none" setzen, wenn Strich-Linienumrisse genutzt werden. |
Strichfarbe (stroke) | string | - | Randumrissfarbe. Auf "currentColor" setzen, um das benachbarte Schriftfarbdesign zu erben. |
Aria-Beschreibungslabel (aria-label) | string | - | Screenreader-Label. Wenn leer gelassen, wird das Icon automatisch vor Screenreadern verborgen (aria-hidden="true"). |
Barrierefreiheit & SVG-Optimierungshinweise
- Aria-Hidden standardmäßig: Da Icons häufig als dekorative visuelle Hervorhebungen verwendet werden (wie Bullet-Icons neben einer Textliste), wendet die Komponente automatisch
aria-hidden="true"an, wenn kein beschreibenderaria-label-Text geliefert wird. - Intelligentes SVG-Merging (
asChild): Für benutzerdefinierte Entwickler-Layouts führt das Setzen vonasChild(Standard true) automatisch die Zusammenführung der berechneten Klassennamen und Skalierungsparameter der Komponente direkt auf ein einzelnes, manuell erstelltes untergeordnetes<svg>-Element durch. Dies eliminiert das Rendern redundanter Wrapper-Elemente im ausgegebenen HTML-Quellcode. - Farberbe: Da das zugrunde liegende CSS-Rezept
color: currentcolorsetzt, erben Vektorpfade mitstroke="currentColor"oderfill="currentColor"nahtlos die übergeordneten Typografie-Farbkonzepte.