Iconseasy_svg_icon

[easy_svg_icon]

Place an icon from the Easy SVG library in posts, widgets and page builder text fields where you cannot write PHP, with an optional class and label.

Shortcode · Easy SVG · Status: Stable

The [easy_svg_icon] shortcode puts one icon from the site's icon library into content: a classic post, a Shortcode block, a text widget or a page builder's text field. It renders exactly what easy_svg_icon() renders, because it is a thin wrapper around that function.

Usage

[easy_svg_icon name="easy-svg/heart" class="icon icon--small" label="Favourite"]

When to use it

  • An editor wants an icon inside text and cannot or should not write PHP.
  • A page builder offers a text or HTML field that runs shortcodes, but no icon element.
  • A classic theme or a widget area where the block editor is not used.

When not to use it:

  • In block content on WordPress 7.1 or newer, the core Icon block with the easy-svg collection is the native choice.
  • In PHP templates. Call easy_svg_icon() directly; it also offers the decorative switch the shortcode does not have.

Parameters

body
namestring
Required

The icon: a bare slug (heart) or a collection-qualified name (easy-svg/heart). Surrounding spaces are trimmed. A missing or empty name renders nothing. The library's copy button gives you the exact form, including a -2 suffix the slug may have received when the name was taken.

body
classstring

CSS classes for the root svg element, separated by spaces. Escaped as an attribute. Empty is the same as not set.

body
labelstring

The accessible name. Set it when the icon means something on its own (an icon-only link, a rating). The icon then gets role="img", focusable="false" and aria-label. Without label the icon is decorative: aria-hidden="true" and focusable="false". Empty is the same as not set.

Any other attribute (for example decorative, size or onload) is ignored.

Return value

returnstring

The icon's SVG markup with the class and ARIA attributes on the root, or an empty string when the name is missing or no icon answers to it. WordPress puts the returned string where the shortcode stood.

Default

Without class and label: a decorative icon, aria-hidden="true" focusable="false", no class.

Examples

Decorative icon before a phrase

[easy_svg_icon name="phone" class="inline-icon"] Call us on 030 1234567

The text says what the icon means, so no label.

Icon that carries meaning

<a href="https://example.com/feed/">[easy_svg_icon name="easy-svg/rss" label="RSS feed"]</a>

The link has no text, so the label is its only name for screen reader users.

Styling the inline icon

Shortcode output has no size. Add a small rule to your theme or the Customizer's Additional CSS:

.inline-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
}

Rendering it from PHP

If a template receives content with shortcodes, do_shortcode() renders it. Prefer calling the function directly when you write the template yourself.

$intro = get_post_meta( get_the_ID(), 'myplugin_intro', true );
echo wp_kses_post( do_shortcode( $intro ) ); // Careful: wp_kses_post() strips SVG.

The line above shows a common mistake: wp_kses_post() does not know SVG and removes the icon. Run your own escaping first, then do_shortcode() as the last step.

How it works

  1. The shortcode is registered on init, and only while the icon library is switched on under Icons, Settings. The switch is read when the plugin loads, so a change applies from the next request.
  2. WordPress calls easy_svg_icon_shortcode() with the attributes. A call without attributes passes a string, which is treated as no attributes.
  3. name is trimmed. Only class and label are passed on, and only when they are not empty.
  4. easy_svg_icon() does the rest: lookup, the easy_svg_icon_markup filter, ARIA attributes.

The shortcode is the only way an editor can render an icon in post content without the Icon block. It goes through the same lookup and the same hardened stored markup as the PHP function, so it adds no second path for raw bytes onto a page.

Pitfalls

  • Library switched off. While the icon library is off, the shortcode is not registered and WordPress prints [easy_svg_icon ...] as plain text. easy_svg_icon() in PHP keeps working.
  • No decorative attribute. You cannot force a meaningful icon without a label. Write a label instead.
  • Unknown names fail silently. A typo or a deleted icon renders nothing, with no notice on the page. Copy the name from the library.
  • Escaping after the shortcode. Any wp_kses_post() or esc_html() that runs after do_shortcode() strips or escapes the SVG.
  • No size, no colour change. The icon has the dimensions and colours stored in the file. Use CSS on the class.
Was this page helpful?