Ikony

Każdy badge może pokazywać ikonę obok tekstu. Plugin dostarcza wyselekcjonowaną bibliotekę 460+ ikon SVG i pozwala też uploadować własne SVG przez menedżer mediów Shopware.

Wybór ikony

W formularzu badge’a otwórz kartę Ikona i wybierz z:

Wbudowane ikony — przeszukaj katalog po słowie kluczowym (np. star, flame, truck).
Własny upload — wybierz dowolny SVG przesłany do biblioteki mediów Shopware.

Zostaw pole puste żeby renderować badge z samym tekstem.

Ustawienia ikony

Każdy badge kontroluje swoją ikonę niezależnie:

Pole	Efekt
Ikona	SVG do wyrenderowania.
Rozmiar	Rozmiar ikony w jednostkach CSS (np. `16px`, `1rem`).
Kolor	Kolor ikony. Dziedziczy z koloru tekstu badge’a gdy puste.
Pozycja	Lewa lub Prawa tekstu.
Margin	Dodatkowa przestrzeń między ikoną a tekstem.

Pole Rozmiar ikony fallbackuje na domyślne slotu / rozmieszczenia / globalne gdy puste (zobacz Przegląd stylizacji).

Ikony inline vs. blokowe

Ikona i tekst dzielą ten sam kontener flex. Pole Kierunek flex na badge’u / slocie / globalnych ustawieniach domyślnych kontroluje kolejność:

Row — tekst + ikona obok siebie (ikona po prawej, chyba że Pozycja = Lewa).
Row-reverse — odwrócone.
Column / column-reverse — ikona i tekst ułożone pionowo.

Dla większości badge domyślny układ Row w połączeniu z polem Pozycja jest wystarczający.

Wskazówki

Używaj tej samej rodziny ikon na wszystkich badge’ach dla spójnego wyglądu (np. wszystkie zaokrąglone ikony konturowe).
Dopasuj kolor ikony do koloru tła badge’a dla subtelnego akcentu lub kontrastuj z kolorem tekstu dla podkreślenia.
Dla wstążek narożnych pomiń ikonę — diagonalny układ już niesie wystarczającą wagę wizualną.
Używaj SVG (nie PNG/JPG), żeby ikona skalowała się czysto z rozmiarem fontu badge’a.

Uwagi o własnych SVG

Przy uploadzie własnej ikony:

Prześlij ją jako SVG do Treść → Media w standardowym menedżerze mediów Shopware.
Używaj kwadratowych SVG (np. 24×24, 32×32) żeby pasowały do wartości rozmiaru ikony.
Inline fill="currentColor" pozwala ikonie dziedziczyć kolor tekstu/ikony badge’a. Jeśli Twój SVG hardkoduje kolor, pole Kolor nie wpłynie na niego.