warum zwei icon sets?

Hallo zusammen.

Erkennt jemand den Mehrwert warum es 2 icon sets (default + solid) für das Frontend gibt?
Diese sind zudem beide gleichzeitig in Verwendung?!
Wenn man nun ein eigenes Iconset verwenden möchte muss man einige Dateien extra extenden um das Set zu definieren.
Finde ich sehr unpraktisch.
Wäre doch besser wenn Shopware da nur „ein default set“ hätte welches man einfach überschreiben bzw. austauschen könnte ohne extra Dateien anzufassen und zu extenden.

Bisschen „over engineered“ das Thema mMn., oder übersehe ich da etwas?

Beste Grüße

 

Hallo @thom‍ . kannst du mir verraten wo du diese icon-sets findest? ich finde die nicht. danke und gruss

Hallo @brettvormkopp‍ .

icons sind hier:
/platform/src/Storefront/Resources/dist/assets/icon

Ich hab allerdings rausgefunden das mit Änderung der icon.html.twig das “eigene” pack genutzt werden kann. Variable solid wird dann ignoriert.
Anpassungen an den Files wo zB. “solid” verwendet wird sind nicht nötig.

Man kann somit auch mehrere Sets verwenden wenn man langeweile hat :slight_smile:
Das scheint der mir zuerst entgangene Mehrwert zu sein.

Gruß

1 „Gefällt mir“

@thom‍ vielen Dank. Kannst du mir verraten wie man die im Frontend nutzt? ich steh da echt aufm Schlauch. Danke und Gruss.

{% sw_icon 'search' style { 'size': 'xs', 'pack': 'solid', 'color': 'light'} %}

 

2 „Gefällt mir“

@StefanPoensgen‍ das heisst, dass man einen normalen font-icon mit einer einfachen CSS-Klasse nicht verwenden kann, sondern hier dieses SVG „mit“-nutzen muss?

Gibt es denn überhaupt einen Iconfont? Bootstrap 4 kommt ohne daher und in der Storefront ist mir auch noch kein Iconfont begegnet.

Du kannst ja Fontawsome oder so einbinden. Dann kanst du CSS nutzen :slight_smile:

Icons als einzelne SVGs einzubinden finde ich persönlich schon ganz gut. So werden immer nur die Icons geladen, welche auch wirklich verwendet werden.

Ich habe leider noch keinen Weg gefunden, wie man über ein Theme oder ein Plugin eigene SVG-Icons verwenden könnte…

die svgs werden „inline“ im HTML gerendert, somit wird nichts mehr geladen.
Das ist einer der performantesten Arten um Icons einzubinden.

Wie oben schon mal geschrieben kann man ein eigenes Set in der icon.html.twig verdrahten.
„source“ muss auf das eigene pack im Theme/Plugin zugewiesen werden.
 

Genau, dann gibt es auch keinen zusätzlichen HTTP-Request.

Okay, dann schaue ich mir das mal an.

Guten Abend,

in SW5 war es möglich, in den Shopseiten ganz einfach Iconfonts zu nutzen, z.B. so:

Verstehe ich es richtig, dass das in SW6 nicht mehr möglich ist? Konkret möchte ich in einer Shopseite Icons benutzen, z.B. neben der Mail-Adresse im Kontaktbereich einen Briefumschlag. Bisher habe ich einige Code-Beispiele - wie auch das oben stehende - gefunden, die aber allesamt nicht funktionieren:

Und so weiter. Bei 8mylez hab ich im Blog eine wundervolle Übersicht aller Icons gefunden, weiß aber nicht ob ich den Link hier posten darf :slight_smile: ?!

Viele Grüße

Hallo,

warum Links zu Drittanbieter - Seiten posten, wenn es auch offizielle Seiten von Shopware genau dazu gibt: https://component-library.shopware.com/icons/? Bzw. zur Einbindung gibt es dort auch gleich ein Beispiel: https://component-library.shopware.com/components/sw-icon - wobei du die Einbindung schon über das Twig - Template so machen müsstest, da der TinyMCE es nicht umwandelt wird (Alternativ kann man ja auch einfach die svg über den TinyMCE einbinden, ist ja am Ende das gleiche Ergebnis).

Grüße

Sebastian

1 „Gefällt mir“

Servus Sebastian,

vielen Dank Dir, die beiden Seiten hatte ich auch schon abgegrast :slight_smile: Wie du schreibst, der TinyMCE wandelt leider nicht um wie in SW5. Dann bleibt vorerst nur der Weg über die SVGs.Vielleicht kommts ja noch ^^

Herzlichen Dank

Hi!

Es gibt ein Plugin Namens „HTML Erlebniswelten Element mit Twig Compiler“ mit dem kann man auch Icons mit TWIG einbinden.

In Zeile 7 hab ich ein Shopware Icon eingebunden. Ich versuche nur gerade noch rauszufinden wie ich die Auswahl zwischen Default und Solid machen kann.

Hast du hier eine Lösung gefunden?