In Shopware 6 werden Icons über einen Namen eingebunden, zum Beispiel cart oder truck. Die Zeichnungen dazu kommen aus zwei Sammlungen, die Shopware "Packs" nennt: "default" und "solid". Diese Icons kannst du in deinem Theme, in Templates und in Erlebniswelten nutzen.
Hinweis: ThemeWare® Themes nutzen in der Konfiguration (bzw. in Textbausteinen) das Pack "default". Das Pack "solid" kannst du nur manuell nutzen.
Mit einem ThemeWare® Iconset tauschst du die Zeichnungen hinter diesen Namen gegen die einer anderen Icon-Bibliothek aus – die Namen bleiben die von Shopware.
Welche Iconsets ThemeWare® mitbringt, wie sie aussehen und was du einstellen kannst, findest du im ThemeWare® Handbuch:
Eine dynamische Übersicht aller Icons findest du im ThemeWare® Service Portal:
Shopware 6 Icons einbinden
Um Shopware 6 Icons einzubinden, gibt es mehrere Möglichkeiten, je nachdem wo genau du das gewünschte Icon verwenden möchtest.
Icons in Template-Dateien einbinden
Um Icons in einer TWIG Template-Datei zu verwenden, kannst du das sw_icon-Tag nutzen. Die Einbindung erfolgt über den Tag: {% sw_icon 'icon-name' %}.
Suche dir einfach das passende Icon raus, kopiere den Namen und füge diesen als Argument (siehe 'icon-name') an.
Beispiel:
{% sw_icon 'truck' %}Hinweis: Hast du in ThemeWare® ein Iconset gewählt und steht der "Umfang" auf "Alle Storefront-Icons", zeigt sw_icon die Zeichnung aus diesem Set – sofern das Set den Namen kennt. Sonst bleibt Shopwares eigenes Icon stehen.
Hinweis: Mehr Informationen zum Thema "individuelle Template Anpassungen" findest du in folgendem Tutorial: Individuelle Template-Anpassungen (Twig, HTML)
Icons in CMS-Blöcke einbinden
Um Shopware 6 Icons in Erlebniswelten einzubinden, kannst du einen CMS-Block vom Typ "Text" oder einen HTML-Block nutzen. Gebe dort den HTML-<img>-Tag für das gewünschte Icon im Ordner /bundles/storefront/assets/icon/... ein.
Beispiel:
<img src="/bundles/storefront/assets/icon/default/truck.svg" />Aktuelle Shopware-Versionen:
Der der Pfad /bundles/storefront/assets/icon/default/[icon-name].svg funktioniert in aktuellen Shopware-Versionen leider nicht mehr, denn Shopware hat die Storefront-Icons aus dem öffentlich erreichbaren Bundle-Ordner herausgenommen.
Lade das gewünschte Icon am besten über die Medienverwaltung in deinen Shop hoch (1) und klicke auf "Link kopieren" (3). Du erhälst so den Link über welchen das Bild nun in der Storefront erreichbar ist. Füge diesen Link nun in dein CMS-Element ein.
Beispiel:
<img src="http://mein-shop.de/media/32/8c/f1/1777296709/truck.svg?ts=1777296709" />Hinweis: Ein Icon, das du als Bild (<img>) einbindest, ist eine feste Datei. Ein ThemeWare® Iconset tauscht es nicht aus.
Shopware 6 Icons downloaden
Möchtest du ein Icons in deinen Grafiken oder als Bild über die Shopware 6 Medien-Verwaltung nutzen, kannst du die Icons als SVG-Datei runterladen. Die Icons findest du auf GitHub bzw. in folgendem Ordner:
platform/src/Storefront/Resources/app/storefront/dist/assets/icon/Weiterführende Informationen
- Handbuch: Icons
- Handbuch: Iconsets
- Handbuch: Social Icons
- Anleitung: Individuelle Template-Anpassungen (Twig, HTML)