| 开发者 | wpdynamics |
|---|---|
| 更新时间 | 2026年9月19日 22:51 |
| PHP版本: | 8.3 及以上 |
| WordPress版本: | 7.1 |
| 版权: | MIT |
| 版权网址: | 版权信息 |
sprite.svg), shows all contained <symbol> elements in a convenient picker and inserts the selected icon as <svg><use href="/wp-content/plugins/sf-icon-manager/sprite.svg#symbol-id"> into your content.
The SVG sprite is a static SVG fragment file loaded by the browser via <use> — no JS on the frontend. Since you own the sprite file, every icon stays small, cacheable and fully under your control — exactly the way a hand-built icon set should be maintained.
Who is this plugin for?
This plugin is primarily aimed at advanced theme and plugin developers. It does not give you a code-free icon manager: every icon must first exist as a <symbol> in a sprite file that you own, build and version.
Since WordPress 7.1, core ships its own icon system (wp_register_icon_collection(), wp_register_icon(), wp_get_icon()): icons then automatically appear in the native Icon block's picker and in the REST API, and can be rendered directly in PHP. If you only need a few icons and can register them in code, use core instead — this plugin is then unnecessary.
The fragment approach has advantages when you run a real sprite pipeline:
<use>: stroke-based icons, gradients, currentColor, inline styles and custom viewBox values survive. WordPress 7.1's sanitizer only allows <svg>, <path> and <polygon> (no stroke, no inline styles) and therefore breaks many stroke-based icon sets.rel handling and aria-labels — per icon instance, without touching a stylesheet.wp_get_icon() helper in theme PHP — that is what the native 7.1 approach is for.javascript: links as a safety net.sfim_sprite_url filter (e.g. get_theme_file_uri()) – the filter has priority over everything.directory--filename) are grouped and selectable via a filter in the dropdown.get_block_wrapper_attributes().sfim_sprite_url – the canonical override (has priority).sprite.svg in the plugin directory.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' );
SVG Forge Icon Manager is a developer-focused Gutenberg block that arranges a curated set of SVG icons as one central sprite and reuses them everywhere in your content. It works with any symbol sprite produced by modern build tools, is fully translated, and gives you precise control over colours, size, links and accessibility on every single block instance. The plugin prefers simplicity and performance: no tracking, no third-party requests, no page-weight overhead, and no vendor lock-in to a particular icon pack or service.
/wp-content/plugins/ (or install the ZIP via Plugins → Add New).ico.svg with <symbol id="..."> elements) via Settings → SVG Forge Icon Manager or reference your own file with the sfim_sprite_url filter.From the central sprite file ico.svg. Each icon is a <symbol id="my-icon" viewBox="0 0 24 24">…</symbol> element. The sprite is a static SVG fragment file that the browser loads as a regular SVG fragment.
WordPress 7.1 offers a native icon system with wp_register_icon_collection() / wp_register_icon() / wp_get_icon() — that is enough if you register a few icons directly in code. This plugin complements that where a central SVG sprite is used: full SVG freedom (including stroke icons), existing sprites without per-icon PHP code, a single cacheable file and per-instance block styling. Since 0.2 the plugin can also register every symbol of that sprite as an sf-icon-manager collection (experimental), so the same sprite feeds the native Icon block and wp_get_icon() too — see the "WordPress native icon integration" setting.
Yes. The frontend markup is generated server-side in render.php; the built JS is only needed in the editor.
Put the block's color settings into your theme's theme.json:
{
"version": 3,
"settings": {
"blocks": {
"sf-icon-manager/svg-icon": {
"color": { "custom": false, "palette": [] }
}
}
}
}
That removes the standard Gutenberg Color/Background panels for the SVG Icon block. As in the core Icon block, multi-color icons (e.g. Tango icon sets) keep their baked-in colors and are not affected by the color controls; monochrome icons follow the chosen color.
The size is the standard Gutenberg Dimensions panel (supports.dimensions.width, like the core Icon block): the block is square, and size presets are standard theme.json dimensionSizes per block:
{
"version": 3,
"settings": {
"blocks": {
"sf-icon-manager/svg-icon": {
"dimensions": {
"dimensionSizes": [
{ "name": "S", "slug": "s", "size": "32px" },
{ "name": "L", "slug": "l", "size": "64px" }
],
"width": true
}
}
}
}
}
With presets the panel shows a slider that moves across the preset sizes, like the core Icon block. A toggle next to it switches to a custom value input with a slider, using the allowed units (spacing.units). dimensions.width: false disables sizing entirely, so the block always renders at its default size.
<use> (no JS on the frontend), added the custom icon sets tutorial link and a "Cache friendly" selling point.Tested up to: 7.1 (wp.org plugin check rejects minor versions).wp_enqueue_style.composer.json ships in the plugin ZIP (required when vendor/ exists)./i.svg no longer cached immutably: the local-file branch revalidates on every request (no-cache, must-revalidate) with real 304 Not Modified responses, so sprite changes are picked up immediately./i.svg for the sprite, opt-in via the sfim_short_url filter.main; the plugin ZIP ships its vendored dependencies.docs/api.md API reference; settings page shows the short URL under "Active sprite file".load_plugin_textdomain() call; WordPress loads translations for the plugin slug automatically.sf-icon-manager icon collection (setting "WordPress native icon integration", default Off).