Icons aus icon.liquid des Themes beliebig verwenden?

[Sasheando]

Hallo Zusammen,

Die Icons die mein Theme (Focal von Maestroo) hat liegen in der Datei icon.liquid.

Beispiel aus der Datei:

{%- when 'picto-delivery-truck' -%}
<svg fill="none" focusable="false" width="{{ width | default: 26 }}" height="{{ height | default: 24 }}" class="{{ icon_class }}" viewBox="0 0 26 24">
<path d="M17 17H8.68..........." stroke="currentColor" stroke-width="{{ settings.icon_stroke_width }}" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

Wie kann ich diese Icons an anderen Stellen (html feld oder Custom Liquid) ausgeben ohne den kompletten code mit kilometerlangem path zu verwenden?

[Gabe]

Hey @Sasheando 

Danke für die Angaben und schauen wir hier wie wir dich in die richtige Richtung deuten können so dass du das Problem lösen, kannst, wenn auch mit einem unserer Experten oder Programmierer.

Um die Icons in anderen Stellen (HTML-Feld oder benutzerdefiniertes Liquid) auszugeben, ohne den gesamten SVG-Code einzufügen, kann man die include-Anweisung von Liquid verwenden. Mit der include-Anweisung kann man den Inhalt einer Liquid-Datei in eine andere einfügen. In deinem Fall möchtest du den Inhalt der icon.liquid-Datei verwenden.

Angenommen, du möchtest das 'picto-delivery-truck'-Icon aus der icon.liquid-Datei an einer anderen Stelle im Theme einfügen, ggf. geht das mit einem Code wie den folgenden, das kann ich aber nicht bestätigen denn ich kenne das Focal Theme nicht:

{% assign icon_name = 'picto-delivery-truck' %}
{% assign width = 26 %}
{% assign height = 24 %}
{% assign icon_class = 'your-custom-class' %}
{% include 'icon', icon_name: icon_name, width: width, height: height, icon_class: icon_class %}

Ersetze 'your-custom-class' durch den gewünschten Class Name, wenn du eine benutzerdefinierte CSS-Klasse hinzufügen möchtest.

Durch diesen Code sollte das Icon an der gewünschten Stelle eingefügt werden, ohne dass du den gesamten SVG-Code kopieren und einfügen musst. Denke daran, dass du die Werte von icon_name, width, height und icon_class ändern kannst, um verschiedene Icons oder Größen anzuzeigen.

Wenn du es selber auf deiner Seite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist also Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

VG,