In diesem Beitrag erfährst du, wie du eigene SVG Icons in dein Shopware 6 Theme einbinden kannst. Diese Anleitung richtet sich an Shop-Betreiber:innen, Designer:innen und Entwickler:innen, die bereits grundlegende Kenntnisse über Shopware 6 haben, jedoch wenig Erfahrung mit Shopware 6 Themes. Wir werden Schritt für Schritt durch den Prozess gehen und konkrete Code-Beispiele liefern. Zunächst betrachten wir die grundlegenden Vorteile von SVG Icons, sowie die Verwendung der mitgelieferten Shopware 6 Icons.
Warum SVG Icons in Shopware 6 verwenden?
SVG Icons bieten gegenüber PNG oder JPG einige Vorteile:
- Skalierbarkeit: SVG Icons sind vektorbasierte Grafiken und können daher in jeder erdenklichen Größe genutzt werden.
- Kleine Dateigröße: Sie sind oft kleiner als andere Formate.
- Styling: SVG Icons lassen sich einfach mit CSS stylen.
Verwendung der integrierten Shopware 6 Icons
Shopware 6 bietet bereits eine Vielzahl von integrierten Icons, die du in deinem Theme verwenden kannst. Diese Icons sind Teil des Shopware-Standard-Icon-Sets und können über die von Shopware bereitgestellte Twig-Extension einfach in deinen Templates eingebunden werden.
Übersicht der integrierten Icons
Eine vollständige Übersicht der verfügbaren Shopware Icons findest du entweder im GitHub Repo der Shopware Storefront. Oder ganz einfach in unserer nützlichen Shopware 6 Icons Übersicht. Dort kannst du dir alle in Shopware 6 vorhandenen Icons ansehen und auch direkt den Namen, das komplette SVG oder sogar den Twig-Code kopieren.
Integration der Shopware Icons in deinem Code
Um die integrierten Shopware 6 Icons in deinem Template zu verwenden, kannst du die Twig-Extension sw_icon nutzen. Hier ein Beispiel, wie du dies in deinem Template umsetzen kannst:
Verfügbare Parameter für sw_icon
Die sw_icon Twig-Extension bietet mehrere Parameter, mit denen du die Darstellung der Icons anpassen kannst:
- namespace (string): Der Namespace des Icons (für Standard-Icons nicht benötigt).
- pack (string): Optional. Der Name des Icon-Packs, bspw. „default“ oder „solid“.
- size (string): Optional. Die Größe des Icons. Mögliche Werte sind ‚xs‘, ’sm‘, ‚md‘, ‚lg‘, ‚xl‘.
- class (string): Optional. Zusätzliche CSS-Klassen, die dem Icon hinzugefügt werden sollen.
- style (string): Optional. Inline-CSS-Stile, die direkt auf das Icon angewendet werden sollen.
Hier ist ein erweitertes Beispiel, das diese Parameter verwendet:
In diesem Beispiel wird die Größe der Icons auf ‚lg‘ gesetzt, es werden benutzerdefinierte CSS-Klassen hinzugefügt, und die Farbe der Icons wird über Inline-Styles angepasst.
Durch die Verwendung der integrierten Icons und die Anpassung über die verfügbaren Parameter kannst du dein Shopware Theme flexibel und konsistent gestalten. Schauen wir uns als Nächstes an, wie du eigene Icons in Shopware 6 nutzen kannst.
Verwendung eigener Shopware 6 Icons
Schritt 1: Icons vorbereiten
Bevor du mit dem Einbinden der SVG Icons beginnst, benötigst du deine gewünschten SVG Dateien. Du kannst eigene Icons erstellen oder kostenlose SVG Icons aus Iconsets wie bspw. tabler.io/icons herunterladen.
Schritt 2: Icons in ein Shopware 6 Theme einbinden
Verzeichnisstruktur für Shopware 6 Icons
Um die Icons in dein Shopware 6 Theme einzubinden, musst du sie in das richtige Verzeichnis legen. Erstelle dafür einen Ordner innerhalb deines Themes.
Verzeichnisstruktur:
/custom/plugins/DeinTheme/src/Resources/app/storefront/src/assets/icon/my-pack
Beispiel: Conversion Header mit SVG Icons
Nehmen wir an, du möchtest Icons für einen Conversion Header einbinden, der Vorteile wie „Kostenloser Versand“, „100 Tage Rückgaberecht“ usw. darstellt.
Schritt 3: SVG Icons in Shopware 6 einbinden
SVG Dateien im Shopware 6 Theme ablegen
Lege deine SVG Icons in das Verzeichnis icons ab. Zum Beispiel:
/custom/plugins/DeinTheme/src/Resources/app/storefront/src/assets/icon/my-pack/versandkostenfrei.svg
Icons in einem Twig-Template verwenden
Jetzt musst du die Icons in deiner Template-Datei referenzieren. Erstelle oder bearbeite die entsprechende Template-Datei im Verzeichnis:/custom/plugins/DeinTheme/src/Resources/views/storefront/layout/header/conversion-header.html.twig
CSS Styling für SVG Icons in Shopware 6
Zum Schluss kannst du die Icons noch mit CSS stylen. Erstelle oder bearbeite dazu die CSS-Datei im Verzeichnis:
/custom/plugins/DeinTheme/src/Resources/app/storefront/src/scss/base.scss
Füge dort den CSS-Code hinzu:
Theme kompilieren
Nachdem du deine eigenen Icons in dein Shopware 6 Theme integriert hast, ist es möglicherweise notwendig, das Theme neu zu „kompilieren“, damit die Änderungen wirksam werden. Dazu kannst du das Skript build-storefront.sh verwenden, welches sich im Hauptverzeichnis deiner Shopware-Installation befindet. Führe dazu folgenden Befehl in deiner Kommandozeile aus:
./bin/build-storefront.sh
Dieses Skript sorgt dafür, dass alle Änderungen an den Assets und Templates korrekt kompiliert und in deinem Shop sichtbar werden. Stelle sicher, dass du diesen Schritt ausführst, nachdem du neue Icons hinzugefügt oder bestehende Änderungen vorgenommen hast. Beim anlegen neuer Twig-Templates kann es zusätzlich notwendig sein auch den Cache deines Shops zu leeren. Führe dazu ganz einfach
./bin/console cache:clear
in deinem Terminal aus.
Fazit
Das Einbinden eigener SVG Icons in Shopware 6 ist dank der flexiblen Template-Struktur und der Unterstützung von SVG Grafiken recht einfach. Indem du die Icons in das richtige Verzeichnis legst und sie in deinen Templates referenzierst, kannst du deinen Shop individuell und professionell gestalten.
Benötigst du Hilfe bei Shopware 6? Wir sind zertifizierter Shopware 6 Entwickler und die Shopware Agentur für dein Business. Kontaktiere uns gerne für ein unverbindliches Angebot für dein Projekt!