Einbinden von SVG-Icons in neuem Theme

Shopware 6 (German) Themes & Design
1

Hallo zusammen,

ich suche mir jetzt seit 2 Tagen den Wolf… Ich hoffe ihr könnt mir den entscheidenen Tipp geben. 
Ich habe einen Vagrantserver aufgesetzt mache gerade die ersten Entwicklungsversuche eines neuen Themes.

Ich würde gerne neue/andere Icons (SVG-Dateien) einsetzen, als die bereits vorhandenen. 
Die icon.html.twig - Datei enthält einen Pfad auf die Icon-SVGs. Diese werden an direkt in den Quellcode geschrieben.
Sieht im Original so aus:
{{ source(’@Storefront/…/dist/assets/icon/’~ pack ~’/’~ name ~’.svg’, ignore_missing = true) }}

Jetzt habe ich mir gedacht, so naiv wie ich bin, in den Pfad einfach meine neuen SVGs zu legen bzw. den Pfad in meinem Theme anzupassen und einen neuen Ordner machen.
Egal was ich mache, funktioniert nicht. Ich komme ehrlich gesagt nicht einmal darauf, wo die SVGs auf meinem Server liegen, die verwendet werden

Die Dateien liegen hier ab:

Sowohl in der kompilierten theme-Datei: 
/home/vagrant/shopware-dev/public/theme/484c0fee1058491d557aa683794b15bc/assets/icon

als auch im storefront-Ordner:
/home/vagrant/shopware-dev/public/bundles/storefront/assets/icon

als auch in meinem-theme-Ordner:
/home/vagrant/shopware-dev/public/bundles/MEINTHEMENAME/assets/icon

Egal wo ich die Icons überschreibe (habe es mit hartem Überschreiben auf dem Server versucht) werden die alten Icons angezeigt.

Hat jemand einen Tipp für mich, wo oder wie ich den Austausch hinbekomme?
Vielen Dank schonmal
Karina

 

 

 

 

2

Hi.

Kann sein das es irgendwie mit der Vererbung noch nicht ganz hinhaut.
Eine Themeanpassung, bzw. generell Anpassungen sollten mMn. als Plugin gelöst werden.
Das findet alles unter /custom/plugins/DeinPlugin statt.

Siehe hier:
https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins

Was mich extrem verwirrt sind die Ordnerstrukturen.
Es gibt ja das StorefrontAssets Plugin:
Shopware 6: Using custom CSS and JavaScript in the Storefront

welches sich aber vom Theme (per console erstellt) unterscheidet.
Javascripte werden zB. auch nur in der StorefrontAssets Struktur bei mir kompiliert.

Was die Icons angeht hab ich auch mal getestet. das geht zZ. nur wenn unter:
/platform/src/Storefront/Resources/dist/assets/icon

ein “Set” ablegt und dieses in der icon.html.twig zugewiesen wird. Wenn ich das Set aber im Plugin ablege gehts nicht.
Die ganze Ordner Strukturierung ist für mich grade auch sehr verwirrend. (Resources/dist,Resources/storefront/dist, public… usw… blick da auch noch nicht wirklich durch)

 

 

 

3

Hallo thom,

habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.

508×816 13.8 KB

Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen. 

Viele Grüße
Karina

4

@kzap schrieb:

Hallo thom,

habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.

image
image508×816 13.8 KB

Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen. 

Viele Grüße
Karina

 Hi Karina, 

Versuche mal das–>  {% sw_icon ‚SVG_NAME‘ %} 

#Beispiel Code nicht getestet: 

 {% block layout_header_actions_account_widget_dropdown_button %}
                                type=„button“
                    id=„accountWidget“
                    data-offcanvas-account-menu=„true“
                    data-toggle=„dropdown“
                    aria-haspopup=„true“
                    aria-expanded=„false“
                    aria-label=„{{ „account.myAccount“|trans }}“>
                {% sw_icon ’ optionalSVG’ %}
           
        {% endblock %}

Mit freundlichen Grüßen
Amin Nayerhabibi
NCN KG

5

Falls Jemand auf das gleiche “Problem” stöst, hier einmal eine Lösung:

  1. “storefront/utilities/icon.html.twig” im eigenen Theme überladen:

    {% 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 %}

 
     {% if pack == 'meinpack' %}
         {{ source('@MeinTheme/../app/storefront/dist/assets/icon/meinpack/'~ name ~'.svg', ignore_missing = false) }}
     {% else %}
         {{ source('@Storefront/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}
     {% endif %}

    {% endblock %}

  2. Icons in dem entsprechenden Pfad anlegen:

z.B.: MeinThemePlugin/src/Resources/app/storefront/dist/assets/icon/meinpack/custom_icon.svg

  1. Icon mit “Packet”-Angabe einbinden:

    {% sw_icon ‘custom_icon’ style { ‘pack’: ‘meinpack’ } %}

 

6 „Gefällt mir“
6

@pclaisse‍ Vielen Dank! Das hat sehr geholfen.

Ein Frage ist bei mir noch aufgetaucht. Hast du eine Möglichkeit gefunden mit dieser Methode Icons vom “default” zu überschreiben?

Damit meine ich etwas in Richtung:

{{ source('@MeinTheme/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = false) }}

Viele Grüße!

Alex

7

Hallo.

Weiss jemand wie sich das bei einem “APP” Theme verhält?

Das scheint in APP Themes nicht wirklich zu funktionieren.

Es lassen sich im Symfony Profiler die vererbten Twigfiles auch nicht öffnen (zb @Storefront/storefront/utilities/icon.html.twig), also die sind nicht klickbar wie bei einem Plugin?!

Scheint sich irgendwie anders zu verhalten in einem APP Theme?! Weiss da jemand mehr und hat einen Tipp?

Gruß
Thom

8

Ich habe mal zu dieser Thematik eine Frage.
Wenn ich das richtig verstehe definiere ich meine Icons via:
…
/@MeinTheme/…/app/storefront/dist/assets/icon/meinpaket/…
{% else %}
/@Storefront/…/app/storefront/dist/assets/icon/default/…
…

Bedeutet dass dann, wenn ich in meinem Paket z.B. nur 10 Custom SVG’s habe, greift das System auf die Default-SVG Icons zurück und zeigt mir z.B. im Warenkorb das X oder irgendwo anders das Standardicon von SW6 an?

9

Mittlerweile ist dies über den Namespace gelöst. Dort trägt man sein Theme ein und er holt sich dann das entsprechende Icon.

Hier ein Auszug aus der icon.html.twig {{ source('@' ~ namespace ~ '/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}

1 „Gefällt mir“