Verwenden von SVG-Symbolen in Shopify

Ich habe über 30 SVG-Symbole, die ich in meinem Shopify-Thema verwenden möchte. Zum besseren Lesbarkeit willen will ich nicht, dann direkt in der .liquid Vorlage hinzufügen, aber zu verwenden ist:Verwenden von SVG-Symbolen in Shopify

{% include 'some-icon' %}

und einig-icon.liquid den SVG-Code

Das Problem ist, dass alle diese 30 Dateien müssen sich in meinem Snippets-Verzeichnis befinden. Mit all den anderen Dateien in Snippets wird es ein Durcheinander sein.

Ist es möglich, ein zusätzliches Verzeichnis in Shopify zu erstellen und sie von dort importieren:

{% include 'MyIcons/some-icon' %}

Jede andere Art und Weise, dies zu tun? Danke

Quelle

2015-02-13 Mircea

etwas off topic, aber wenn Ihr SVG-Icons monochromatische sind könnten Sie https: // Github .com/FontCustom/fontcustom um sie in eine Schriftart zu konvertieren. Ich habe das vor 6+ Monaten für ein Projekt getan und könnte nicht glücklicher sein. – firien

einfarbig ??? Sie können eine beliebige Farbe mit Füllung hinzufügen. Font-Face bedeutet zusätzliche Anfrage und ist nicht semantisch, das ist es, was ich in erster Linie vermeiden möchte. – Mircea

roger. aber mit monochromatisch habe ich gemeint, dass das Symbol eine einzige einheitliche Farbe ist und keine Farbverläufe enthält - weil das nicht gut auf ein Font-Glyph übertragen würde. – firien

Sie waren auf der Suche nach einer einfachen und wartbaren Möglichkeit, SVG-Icons zu Shopify hinzuzufügen. Hier ist mein bester Weg gefunden. Wenn Sie es besser wissen, lassen Sie es mich wissen.

In snipets erstellen Datei 'my-Thema-Ikonen' Hexe enthält:

{% if my-theme-icons == 'home' %} 
<svg xmlns="http://www.w3.org/2000/svg"> 
... my home icon 
</svg> 
{% elsif my-theme-icons == 'search' %} 
<svg xmlns="http://www.w3.org/2000/svg"> 
... my search icon 
</svg> 
{% endif %}

In Vorlagen sind sie genauso:

{% include 'my-theme-icons' with 'home' %} 
{% include 'my-theme-icons' with 'search' %}

Hoffe, es hilft

Quelle

2015-02-13 20:27:33 Mircea

wirklich einfach, einfache Implementierung. Vielen Dank – Benji

Wäre viel besser, eine Case-Anweisung zu verwenden – Buts

No. Sie können keine Verzeichnisse für Assets, Snippets oder andere Themenkomponenten erstellen. In Ihrer lokalen Entwicklungsumgebung, in der es auf eine Unordnung ankommt, können Sie Ihre Dateien farblich nach Erweiterung farblich codieren, um die Typen offensichtlicher zu machen, oder eine Sortierung nach Erweiterung aktivieren, um sie zu verwenden.

Quelle

2015-02-14 04:21:22

Ich habe das verstanden. Was denkst du über meine Lösung mit {% include 'my-theme-icons' mit 'search'%}? Irgendwelche Leistungsprobleme? Danke – Mircea

Keine Leistungsprobleme damit, obwohl das Schnipsel am Ende ziemlich chaotisch sein könnte. Ich würde vorschlagen '{% include 'my-theme-icons', Icon: 'icon-home'%}'. Auf diese Weise kann Ihr Snippet erheblich vereinfacht werden, indem die Variable 'icon' anstelle von if Anweisungen für' my-theme-icons' verwendet wird – Carson

{% include 'icon' with 'shopify' %}

Rufen Sie das gewünschte Symbol auf und ordnen Sie sie in einem Codefragment mit einer Case-Anweisung an.

<!-- snippets/icon.liquid --> 
<span class="icon" aria-hidden="true"> 
    {% case icon %} 
    {% when 'shopify' %} 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="shopify" aria-label="Shopify" role="img"> 
     <title>Shopify</title> 
     <desc>Shopify {{ 'icon.icon' | t }}</desc> 
     <path d="M13.3 3.1C13.3 3 13.2 3 13.1 3c-0.1 0-1.3-0.1-1.3-0.1S11 2 10.9 1.9c-0.1-0.1-0.3-0.1-0.3 0 0 0-0.2 0.1-0.5 0.1C9.8 1.2 9.5 0.5 8.3 0.5 8.1 0.1 7.8 0 7.5 0c-2.1 0-3 2.6-3.4 3.9C3.3 4.1 2.8 4.3 2.7 4.3 2.3 4.5 2.2 4.5 2.2 4.9c0 0.3-1.2 9.4-1.2 9.4l9.1 1.7 4.9-1.1C15 14.9 13.3 3.2 13.3 3.1zM8.3 2.6c-0.5 0.2-1 0.3-1.6 0.5 0.3-1.2 0.9-1.8 1.4-2C8.3 2 8.3 2.6 8.3 2.6zM7.4 0.6c0.1 0 0.2 0 0.3 0.1C7.1 1 6.3 1.7 6 3.3 5.6 3.4 5.2 3.6 4.8 3.7 5.1 2.5 6 0.6 7.4 0.6zM7.8 7.5c0 0-0.5-0.3-1.2-0.3 -1 0-1 0.6-1 0.8 0 0.8 2.2 1.1 2.2 3.1 0 1.5-1 2.5-2.3 2.5 -1.6 0-2.4-1-2.4-1l0.4-1.4c0 0 0.8 0.7 1.5 0.7 0.5 0 0.6-0.4 0.6-0.6 0-1.1-1.8-1.1-1.8-2.9 0-1.5 1.1-2.9 3.2-2.9 0.8 0 1.2 0.2 1.2 0.2L7.8 7.5zM8.8 2.4c0-0.1 0-0.1 0-0.2 0-0.5-0.1-0.9-0.2-1.2 0.5 0.1 0.8 0.6 1 1.2C9.4 2.3 9.1 2.4 8.8 2.4z" class="fill"/> 
    </svg> 
    {% when 'menu' %} 
    <!-- SVG CODE GOES HERE --> 
    {% when 'cart' %} 
    <!-- SVG CODE GOES HERE --> 
    {% else %} 
    <!-- {{ icon | capitalize }} icon not found --> 
    {% endcase %} 
</span>

Quelle

2017-02-06 02:01:21 Buts

würde ich vorschlagen, eine Aufgabe Läufer (wie Gulp oder Grunt) unter Verwendung eines SVG-Symbol Sprite zu bauen (es gibt mehrere Module, die dies tun). Ihre src-Dateien können sich außerhalb des Themenordners befinden, werden schließlich verkettet und einem Ausschnitt hinzugefügt, den Sie unmittelbar nach dem Eröffnen des Tags <body> einfügen. Ein weiteres icon.liquid Schnipsel dann Referenzen und „Verwendung“ sie:

<svg class="icon icon-{{ icon }}"> 
    <use xlink:href="#icon-{{ icon }}"></use> 
</svg>

Sie würden diese Schnipsel wie folgt umfassen: {% include 'icon' with 'logo' %}

Quelle

2017-08-31 16:24:11

Verwenden von SVG-Symbolen in Shopify

Antwort

Verwandte Themen