| 开发者 | wpdynamics |
|---|---|
| 更新时间 | 2026年10月5日 02:12 |
| PHP版本: | 8.3 及以上 |
| WordPress版本: | 7.1 |
| 版权: | MIT |
| 版权网址: | 版权信息 |
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?
<use> element (SVG 2). All current browsers support it — no polyfill, no build step.currentColor, inline styles and custom viewBox values. WordPress 7.1's sanitizer allows only <svg>, <path> and <polygon> and breaks most stroke-based sets.echo sfim_get_icon( 'icon-id' );<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
.svg or .svgz).foreignObject, no unknown tags. Same engine as Safe SVG.sfim_sprite_url filter overrides the sprite file (e.g. get_theme_file_uri()).rel including noopener/noreferrer).get_block_wrapper_attributes().core/icon) from the editor.echo sfim_get_icon( 'close', [ 'size' => 20 ] );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' );
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.
/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 plain static SVG file; the browser pulls single icons out of it with the <use> element (SVG 2, W3C).
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. With a central SVG sprite this plugin goes further: the icons are served as standard SVG fragments (W3C specification) with no frontend PHP, CSS or JS, full SVG freedom (including stroke icons), existing sprites without per-icon PHP code, one cacheable file and per-instance block styling.
Yes. On the settings page (WordPress core Icon block) you can enable "Disable the WordPress core Icon block". core/icon is then removed from the block editor (also for blocks already saved in content) and from the block-types REST API, so the SVG Icon block is the only icon block while editing. This is a backend switch: the frontend is not touched and stored content keeps rendering as before, so you can switch it back on at any time.
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.
sfim_get_icon() renders a sprite icon as an <svg><use> fragment from theme code, for classic themes and custom PHP (size, colors, padding, label, optional link and theme presets).<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).