What?

Support file: paths for block icons in block.json, allowing block authors to use "icon": "file:./assets/icon.svg" instead of being forced to set custom SVG icons via JavaScript only.

Also updates the JSON Schema to accept icon descriptor objects (src, background, foreground, shadowColor) in addition to the existing string form.

Why?

Currently, custom SVG icons can only be set via registerBlockType in JavaScript. The block.json icon field only accepts Dashicon slugs. This means block authors who want a custom SVG icon must either:

1. Duplicate metadata between block.json and JS registration
2. Register the block entirely in JS, losing the benefits of block.json (server-side registration, REST API exposure, etc.)

This PR closes that gap by bringing feature parity between block.json and JS-based icon registration, following the established file: prefix pattern already used by style, editorScript, render, and variations fields.

How?

Four layers of changes:

• JSON Schema (schemas/json/block.json): Updated icon from { "type": "string" } to a oneOf accepting either a string or an object with src, background, foreground, shadowColor. Variation icon reuses via $ref.
• PHP runtime (lib/blocks.php): New gutenberg_resolve_block_icon_path() hooked into block_type_metadata. When the icon starts with file:, it uses remove_block_asset_path_prefix() (the same utility used by scripts/styles/render) to resolve the path relative to block.json, reads the SVG file, and inlines the content. Handles both string and object forms.
• Build system (packages/scripts/config/webpack.config.js): The CopyWebpackPlugin transform() now detects file: icons and inlines the SVG content at build time, so the built block.json is self-contained.
• Icon rendering (packages/components/src/icon/index.tsx): The <Icon> component now detects SVG markup strings (starting with <svg or <?xml) and renders them directly with proper width/height from the size prop, rather than passing them through as Dashicon names.

Testing Instructions

1. Schema validation

node test/integration/validate-block-json-schema.js

All 126 block.json files should pass.

2. Unit tests

jest --config test/unit/jest.config.js packages/components/src/icon/test/index.tsx

All 13 tests should pass (10 existing + 3 new for SVG string rendering).

3. Manual test with a custom block

1. Create a block with a custom SVG icon file (e.g., src/assets/icon.svg)
2. Set "icon": "file:./assets/icon.svg" in block.json
3. Build with npm run build (or npx wp-scripts build)
4. Verify the icon appears in the block inserter

4. Object form test

{
    "icon": {
        "src": "file:./assets/icon.svg",
        "background": "#ff0000",
        "foreground": "#ffffff"
    }
}

Verify the icon renders with colored background in the inserter.

5. PHP-only registration (no build step)

For blocks not using @wordpress/scripts, verify the icon resolves correctly via server-side registration with register_block_type_from_metadata().

Use of AI Tools

This pull request was authored with the assistance of AI tooling (Deepseek via opencode). All AI-generated code has been reviewed and tested for correctness. See the WordPress AI Guidelines: https://make.wordpress.org/ai/handbook/ai-guidelines/.