SVG Forge Icon Manager

Description

The SVG Forge Icon Manager Block loads a central SVG sprite file (by default the bundled i.svg), shows all contained <symbol> elements in a convenient picker and inserts the selected icon as <svg><use href="/i.svg#symbol-id"> into your content.

Why another icon plugin?

• A W3C standard: every icon is referenced with the <use> element (SVG 2). All current browsers support it — no polyfill, no build step.
• No frontend cost: the plugin loads no external CSS or JavaScript. The browser fetches the sprite once and renders every icon from it.
• One cacheable file: a static SVG file, fetched once and reused by every icon on the site.
• Full SVG survives: stroke icons, gradients, currentColor, inline styles and custom viewBox values. WordPress 7.1’s sanitizer allows only <svg>, <path> and <polygon> and breaks most stroke-based sets.
• Classic Themes: You can use php to output icons in your classic theme, echo sfim_get_icon( 'icon-id' );

Who is this plugin for?

Developers who maintain their own sprite file. Every icon must exist as a <symbol> in a sprite you build and version — there is no icon manager UI.

WordPress 7.1 ships its own icon system (wp_register_icon(), wp_get_icon()). That is enough for a few icons registered in PHP. If you run a sprite, use this plugin: no frontend code, and it works on WordPress 6.6 and later.

Features

• Settings page to upload the sprite file (.svg or .svgz).
• Uploaded sprites are sanitized with a strict allowlist: no scripts, no event handlers, no foreignObject, no unknown tags. Same engine as Safe SVG.
• Upload a sprite you already have, or build one with svgforge-cli.
• sfim_sprite_url filter overrides the sprite file (e.g. get_theme_file_uri()).
• Symbol picker in the editor with a live preview.
• Icons from sprite subdirectories are grouped.
• Icons can be linked (new tab, rel including noopener/noreferrer).
• Aria-label for screen readers.
• Fill and stroke colour as well as size per block.
• Server-side rendering with get_block_wrapper_attributes().
• Alignment, anchor and additional CSS classes.
• Optional switch to remove the core Icon block (core/icon) from the editor.
• Icon helper for classic themes: echo sfim_get_icon( 'close', [ 'size' => 20 ] );

Honest limitations

• Adding or editing icons means rebuilding the sprite file — typically with svgforge-cli.

Configure the sprite file

The SVG sprite file is resolved in this order (first existing source wins):

1. Filter sfim_sprite_url – the canonical override (has priority).
2. Uploaded file from Settings → SVG Forge Icon Manager (backend upload).
3. Fallback: sprite.svg in the plugin directory.

Override with a filter (recommended, versionable with the theme) in the theme’s functions.php:

add_filter( 'sfim_sprite_url', fn () => get_theme_file_uri( 'assets/ico.svg' ) );

or point it at a CDN:

add_filter( 'sfim_sprite_url', fn () => 'https://cdn.example.com/icons/ico.svg' );

If you have no sprite yet, this tutorial walks you through building your own icon set step by step.

Icons in theme templates

Classic themes (and any other custom PHP) can print icons from the sprite without using the block:

// Decorative icon: hidden from screen readers, sizes with the font (1em).
echo sfim_get_icon( 'close' );

// Sized, labelled and linked.
echo sfim_get_icon( 'close', [ 'size' => 20, 'label' => 'Close', 'link' => get_permalink() ] );

sfim_get_icon() returns the same `<svg><use>` fragment the block renders, so icons look identical in a template and in post content. It is a plain function of the plugin – no `require`, no `use`, just call it. Useful arguments: `size` (or `width`/`height`), `color`, `background`, `padding`, `class`, `label`, `link`, `target` and `rel`.

Development

Development is done on GitHub.