thomthom MemberComments: 48 Received thanks: 8 Member since: April 2014 edited November 2019

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

 

Answers

  • brettvormkoppbrettvormkopp MemberComments: 1567 Received thanks: 316 Member since: March 2013

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

  • thomthom MemberComments: 48 Received thanks: 8 edited November 2019 Member since: April 2014

    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 :)
    Das scheint der mir zuerst entgangene Mehrwert zu sein.

    Gruß

    Thanked by 1brettvormkopp
  • brettvormkoppbrettvormkopp MemberComments: 1567 Received thanks: 316 Member since: March 2013

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

  • StefanPoensgenStefanPoensgen MemberComments: 35 Received thanks: 6 Member since: May 2017
    {% sw_icon 'search' style { 'size': 'xs', 'pack': 'solid', 'color': 'light'} %}

     

    Thanked by 1brettvormkopp
  • brettvormkoppbrettvormkopp MemberComments: 1567 Received thanks: 316 Member since: March 2013

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

  • StefanPoensgenStefanPoensgen MemberComments: 35 Received thanks: 6 Member since: May 2017

    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 :)

  • mdswmdsw MemberComments: 146 Received thanks: 5 Member since: June 2017

    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...

  • thomthom MemberComments: 48 Received thanks: 8 Member since: April 2014

    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.
     

  • mdswmdsw MemberComments: 146 Received thanks: 5 Member since: June 2017

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

    Okay, dann schaue ich mir das mal an.

  • musikdiscount24musikdiscount24 MemberComments: 26 Received thanks: 3 Member since: September 2012

    Guten Abend,

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

    <em class="icon--account">&nbsp;</em>

    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:

    <i class="icon--vcard"></i>
    <i name="icon--vcard"></i>
    <em class="icon--vcard"></em>
    <em name="icon--vcard"></em>
    <sw-icon class="" name""></sw-icon>

    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 :-) ?!

    Viele Grüße

  • sschreiersschreier MemberComments: 3053 Received thanks: 836 edited January 13 Member since: August 2014

    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

    Thanked by 1musikdiscount24
  • musikdiscount24musikdiscount24 MemberComments: 26 Received thanks: 3 Member since: September 2012

    Servus Sebastian,

    vielen Dank Dir, die beiden Seiten hatte ich auch schon abgegrast :-) 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

Sign In or Register to comment.