Eigene SVG-Icons in Shopware 6 verwenden

Icons sind im Web sehr beliebt, da durch Sie Text gespart werden kann und optisch sehr schön anzusehen sind. Aus diesem Grund verwendet auch Shopware Icons, die selbstverständlich auch ausgetauscht werden können, um bspw. das Corporate Design des Unternehmens zu stützen. Die Verwendung unter Shopware 6 unterscheidet sich zu der unter Shopware 5. Während bei Shopware 5 sogenannte Icon-Tags (<i></i>) und Icon-Fonts Anwendung finden, benutzt Shopware 6 SVG-Icons. Die Einbindung eigener SVG-Icons in Shopware 6 ist etwas umständlich. Wenn man weiß wie, relativ simpel und es bedarf nur der Erweiterung eines Twig-Templates und der anschließenden Einbindung der SVGs. Dieses Shopware-Tutorial setzt ein bereits installiertes Theme voraus.

Schritt 1: Erweiterung der Shopware Template-Datei

Damit Shopware zuerst überprüft, ob eigene Icons vorhanden sind, benötigt das System eine Anpassung des Shopware-Icon-Templates.

• Erstellen Sie unter *IhrTheme*/src/Resources/views/storefront/utilities die Datei icon.html.twig, um die Originaldatei zu erweitern. Erstellen Sie diese Ordner, sollten Sie nicht vorhanden sein. Die Ordnerstruktur müsste dann wie folgt aussehen:
  
  

  Eigene SVG-Icons in Shopware

• Kopieren Sie nun folgenden Code-Block und fügen diesen in die leere Datei ein. Beachten Sie, dass Sie TestTheme durch ihren Theme-Namen ersetzen:

  {% sw_extends '@Storefront/storefront/utilities/icon.html.twig' %}
  {% block utilities_icon %}
      {% set styles = [ size, color, rotation, flip, class ] %}
      {% if pack is not defined %}
          {% set pack = 'default' %}
      {% endif %}
      <span
          class="icon icon-{{ name }}{% for entry in styles %}{% if entry != "" %} icon-{{ entry }}{% endif %}{% endfor %}">
          {% if pack == 'MeineIcons' %}
              {{ source('@TestTheme/../app/storefront/dist/assets/icon/MeineIcons/'~ name ~'.svg', ignore_missing = false) }}
          {% else %}
              {{ source('@Storefront/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}
          {% endif %}
      </span>
  {% endblock %}

In dieser Datei wird nun das originale Icon-Template erweitert und abgefragt, ob ein eigener Icon-Pack bzw. ein eigenes Icon-Set mit dem Namen MeineIcons existiert und anschließend verwendet.

ab

10h

pro Monat

Exklusives Shopware Support-Kontingent sichern

Zertifizierte Shopware-Entwickler

• Kontingent ab 10 Stunden / Monat
• Individuelle Hilfe von echten Shopware-Experten
• Persönliche Ansprechpartner für Ihre Projekte

Jetzt Support-Kontingent sichern

Schritt 2: SVG-Ordner erstellen

Wie Sie sicher bemerkt haben, bezieht sich der eben kopierte Code auf einen Icon-Ordner. In diesem Schritt wird dieser erstellt.

• Erstellen Sie den Ordner unter *IhrTheme*/src/Resources/app/storefront/dist/assets/icon/MeineIcons und benennen Sie ihn wie dargestellt, wenn Sie den Code-Block 1:1 kopiert haben.
  
  

  Die Shopware-Template-Datei für Icons erweitern

Schritt 3:  SVG-Dateien verwenden

Zu guter Letzt müssen nur noch die SVG-Icons in Shopware 6 in den Ordner kopiert werden, damit Sie schließlich auch im Template verwendet werden können. In diesem Beispiel wollen wir das Search-Icon der Header-Suche, also die Lupe, mit einer eigenen SVG-Datei ersetzen.

• Kopieren Sie Ihre neue SVG in den Ordner MeineIcons.
• Erstellen Sie die Datei search.html.twig unter *IhrTheme*/src/Resources/views/storefront/layout/header.

Nun wird die Template-Datei für den Header so erweitert, dass das eigene Icon angewendet wird.

• Kopieren Sie den dargestellten Code-Block in die neue Datei.

  {% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}
  {% block layout_header_search_button %}
      <div class="input-group-append">
          <button type="submit"
              class="btn header-search-btn"
              aria-label="{{ "header.searchButton"|trans|striptags }}">
              <span class="header-search-icon">
                  {% sw_icon 'search-icon' style {'pack' : 'MeineIcons'} %}
              </span>
          </button>
      </div>
  {% endblock %}

Die originale search.html.twig-Datei wird nun durch die neue Datei erweitert. Der dargestellte Twig-Block wird nun mit dem eigenen Icon überschrieben. Beachten Sie, dass anstatt search-icon der Dateiname Ihres Icons des MeineIcons-Ordners verwendet wird (ohne Dateiendung). Zudem sollte nach pack Ihr definierter Icon-Pack stehen, sofern Sie diesen anders als in diesem Code-Block genannt haben.

Nun verwendet Shopware automatisch das neue Icon in der Suchmaske des Headers und hat somit das alte Icon ersetzt:

Ausgabe eigener Icons im Shopware-Frontend

Nun können Sie eigene SVG-Icons in Shopware 6 verwenden, die möglicherweise besser zu Ihrem Corporate Design passen, als die Standard-Shopware-Icons. Das sieht nicht nur schick aus, sondern hilft Ihrem Kunden auch beim Navigieren innerhalb Ihrer Seite. Auf Mobilgeräten kann zudem wertvoller Platz eingespart werden.