Icons

Jedes Badge kann ein Icon neben seinem Text anzeigen. Das Plugin liefert eine kuratierte Bibliothek von 460+ SVG-Icons mit und erlaubt zusätzlich das Hochladen eigener SVGs über Shopwares Media-Manager.

Icon wählen

Öffnen Sie im Badge-Formular die Karte Icon und wählen Sie aus:

Integrierte Icons — durchsuchen Sie den Katalog per Stichwort (z.B. star, flame, truck).
Eigener Upload — wählen Sie ein beliebiges SVG, das in Shopwares Medienbibliothek hochgeladen wurde.

Lassen Sie das Feld leer, um das Badge nur mit Text zu rendern.

Icon-Einstellungen

Jedes Badge steuert sein Icon unabhängig:

Feld	Wirkung
Icon	Das zu rendernde SVG.
Größe	Icon-Größe in CSS-Einheiten (z.B. `16px`, `1rem`).
Farbe	Icon-Farbe. Erbt von der Badge-Textfarbe, wenn leer.
Position	Links oder Rechts des Texts.
Margin	Zusätzlicher Abstand zwischen Icon und Text.

Das Größe-Feld des Icons fällt bei leerer Eingabe auf den Slot-/Platzierungs-/Globalstandard zurück (siehe Styling-Überblick).

Inline- vs. Block-Icons

Icon und Text teilen sich denselben Flex-Container. Das Feld Flex-Richtung am Badge / Slot / den Globalstandards steuert die Reihenfolge:

Row — Text + Icon nebeneinander (Icon rechts, sofern nicht Position = Links).
Row-reverse — gespiegelt.
Column / column-reverse — Icon und Text gestapelt.

Für die meisten Badges reicht das Standard-Row-Layout in Kombination mit dem Feld Position.

Tipps

Verwenden Sie dieselbe Icon-Familie über alle Badges hinweg für eine konsistente Optik (z.B. alle abgerundeten Outline-Icons).
Stimmen Sie die Icon-Farbe für einen dezenten Akzent auf die Badge-Hintergrundfarbe ab oder kontrastieren Sie sie für Hervorhebung mit der Textfarbe.
Bei Eckband-Bändern lassen Sie das Icon weg — das diagonale Layout trägt bereits genug visuelle Last.
Verwenden Sie SVGs (nicht PNG/JPG), damit das Icon mit der Badge-Schriftgröße sauber skaliert.

Eigene SVG-Hinweise

Beim Hochladen eines eigenen Icons:

Laden Sie es als SVG nach Inhalt → Medien in den Standard-Shopware-Medien-Browser hoch.
Verwenden Sie quadratische SVGs (z.B. 24×24, 32×32), damit sie zum Icon-Größenwert passen.
Inline fill="currentColor" lässt das Icon die Badge-Text-/Icon-Farbe erben. Wenn Ihr SVG eine Farbe fest codiert, hat das Farb-Feld keinen Einfluss darauf.