easy_svg_icon (filter)

Twig filter · Easy SVG Pro · Status: Stable

Sometimes the icon address is not written in the template but comes from data: a custom field on the post, an item in a menu, a value in a loop. This filter lets you pipe that value straight into an icon. It is the same renderer as the easy_svg_icon() function, so the output is identical.

Usage

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

Registered in includes/twig/twig.php on the timber/twig filter, next to the function. Available since Easy SVG Pro 1.7.0.

When to use it

• The address comes from a custom field, for example one filled by the ACF icon picker, Meta Box, Lazy Blocks or the registered easy_svg_icon post meta.
• You loop over data that carries an icon per item: features, services, menu items, ACF repeater rows.
• You find pipes easier to read than nested function calls.

Do not use it when:

• You write the address directly in the template. The function form reads more naturally there.
• You need to branch on whether the icon exists. Capture the output first (see the defensive example).

Parameters

Return value

Default

Decorative, without a class, exactly like the function.

Examples

An icon stored on the post

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

easy_svg_icon is the post meta key that Block theme support registers. Any meta key that holds a collection/slug value works the same way.

Agency: a feature grid from an 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>

With the ACF icon picker and its default string return format, row.icon is already collection/slug. If you changed the return format to an array, pipe row.icon.value instead.

A menu with one icon per item

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

Defensive: skip the wrapper when the field is empty or the icon is gone

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

No empty span is printed for posts without an icon, or with an address whose icon was deleted.

How it works

The filter calls the same PHP callback as the function: the value and the hash go to the free plugin's easy_svg_icon(), which looks the icon up through easy_svg_icon_markup and adds the accessibility attributes. Easy SVG Pro registers it only while the licence is active and Timber / Twig is on under Icons → Features, and only when the Twig environment has addFilter() and the \Twig\TwigFilter class. Otherwise only the function exists, or neither.

Pitfalls

• Unknown filter when the feature is off. Like the function, the filter is missing entirely when the licence lapses or the feature is switched off, and Twig then fails with "Unknown filter" while compiling. See the Timber and Twig tutorial for a safe wrapper.
• Field values are not validated here. A field holding Phone Icon or a full URL simply prints nothing. Store addresses as collection/slug.
• Array return formats. Some field plugins return an array instead of the address. Piping an array prints nothing; pick the key that holds the address.
• Order of filters matters. value|upper|easy_svg_icon turns acme/phone into ACME/PHONE, which does not exist. Apply the icon filter to the raw value.

Related

• easy_svg_icon() (Twig function)
• easy_svg_icon_exists()
• easy_svg_icon post meta
• Tutorial: Timber and Twig