Showpare 6 Icons

Shopware 6 Icons: SVG Icons in eigenem Theme integrieren

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 im GitHub Repo der Shopware Storefront. Dort kannst du dir sie ansehen und findest auch gleichzeitig den Namen der Icons, um diese nutzen zu können.

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!