easy_svg_icon (filter)

Twig-Filter · Easy SVG Pro · Status: Stabil

Manchmal steht die Icon-Adresse nicht im Template, sondern kommt aus Daten: einem Feld am Beitrag, einem Menüeintrag, einem Wert in einer Schleife. Mit diesem Filter reichst du so einen Wert direkt an ein Icon weiter. Es ist derselbe Renderer wie die Funktion easy_svg_icon(), die Ausgabe ist also identisch.

Verwendung

{{ 'collection/slug'|easy_svg_icon }}
{{ value|easy_svg_icon( { class: '', label: '', decorative: true } ) }}

Registriert in includes/twig/twig.php über den Filter timber/twig, neben der Funktion. Verfügbar seit Easy SVG Pro 1.7.0.

Wann du es brauchst

• Die Adresse kommt aus einem Feld, zum Beispiel aus der ACF-Icon-Auswahl, Meta Box, Lazy Blocks oder dem registrierten Post-Meta easy_svg_icon.
• Du gehst in einer Schleife über Daten, die pro Eintrag ein Icon tragen: Leistungen, Features, Menüeinträge, ACF-Repeater-Zeilen.
• Du findest Pipes lesbarer als verschachtelte Funktionsaufrufe.

Nicht dafür gedacht:

• Du schreibst die Adresse direkt ins Template. Da liest sich die Funktions-Form natürlicher.
• Du musst verzweigen, ob es das Icon gibt. Fang die Ausgabe vorher ein (siehe das defensive Beispiel).

Parameter

Rückgabewert

Standardwert

Dekorativ und ohne Klasse, genau wie die Funktion.

Beispiele

Ein Icon, das am Beitrag gespeichert ist

<h2 class="entry-title">
	{{ post.meta( 'easy_svg_icon' )|easy_svg_icon( { class: 'entry-title__icon' } ) }}
	{{ post.title }}
</h2>

easy_svg_icon ist der Meta-Schlüssel, den Block-Theme-Unterstützung registriert. Jeder Meta-Schlüssel, der einen Wert collection/slug enthält, funktioniert genauso.

Agentur: ein Feature-Raster aus einem ACF-Repeater

<ul class="features">
	{% for row in post.meta( 'features' ) %}
		<li class="features__item">
			{{ row.icon|easy_svg_icon( { class: 'features__icon' } ) }}
			<h3>{{ row.title }}</h3>
			<p>{{ row.text }}</p>
		</li>
	{% endfor %}
</ul>

Mit der ACF-Icon-Auswahl und ihrem Standard-Rückgabeformat String ist row.icon schon collection/slug. Hast du das Rückgabeformat auf Array gestellt, nimm stattdessen row.icon.value.

Ein Menü mit einem Icon pro Eintrag

{% for item in menu.items %}
	<a href="{{ item.link }}">
		{{ item.meta( 'menu_icon' )|easy_svg_icon }}
		{{ item.title }}
	</a>
{% endfor %}

Defensiv: den Wrapper weglassen, wenn das Feld leer oder das Icon weg ist

{% set icon %}{{ post.meta( 'easy_svg_icon' )|easy_svg_icon }}{% endset %}
{% if icon|trim is not empty %}
	<span class="badge-icon">{{ icon }}</span>
{% endif %}

Für Beiträge ohne Icon, oder mit einer Adresse, deren Icon gelöscht wurde, erscheint kein leeres span.

So funktioniert es

Der Filter ruft denselben PHP-Callback auf wie die Funktion: Wert und Hash gehen an easy_svg_icon() des kostenlosen Plugins, das das Icon über easy_svg_icon_markup sucht und die Barrierefreiheits-Attribute setzt. Easy SVG Pro registriert den Filter nur, solange die Lizenz aktiv und Timber / Twig unter Icons → Funktionen eingeschaltet ist, und nur, wenn die Twig-Umgebung addFilter() und die Klasse \Twig\TwigFilter kennt. Sonst gibt es nur die Funktion, oder keins von beiden.

Stolperfallen

• Unbekannter Filter, wenn die Funktion aus ist. Wie die Funktion fehlt der Filter komplett, wenn die Lizenz ausläuft oder die Funktion abgeschaltet wird, und Twig bricht dann beim Kompilieren mit "Unknown filter" ab. Einen sicheren Wrapper findest du im Tutorial zu Timber und Twig.
• Feldwerte werden hier nicht geprüft. Steht in einem Feld Telefon Icon oder eine komplette URL, kommt einfach nichts heraus. Speichere Adressen als collection/slug.
• Rückgabeformat Array. Manche Feld-Plugins geben statt der Adresse ein Array zurück. Ein Array gibt nichts aus, nimm den Schlüssel, der die Adresse enthält.
• Die Reihenfolge der Filter zählt. value|upper|easy_svg_icon macht aus acme/phone ein ACME/PHONE, und das gibt es nicht. Wende den Icon-Filter auf den rohen Wert an.

Siehe auch

• easy_svg_icon() (Twig-Funktion)
• easy_svg_icon_exists()
• Post-Meta easy_svg_icon
• Tutorial: Timber und Twig