SVG Forge Icon Manager

پهد

Where do the icons come from?

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).

Why not simply use the native SVG icons of WordPress 7.1?

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.

Can I remove the built-in Icon block?

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.

Does it work without JS in the frontend?

Yes. The frontend markup is generated server-side in render.php; the built JS is only needed in the editor.

How do I disable the color options for the block?

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.

How do I offer preset sizes like font sizes?

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.