feat(svg): adds sprite hash manifest for cache busting

[firestar300]

Implements a webpack plugin that generates a JSON file containing content hashes for SVG sprite files.

This allows for cache busting of sprite files by appending the hash as a query parameter to the sprite URL.

The Svg service is updated to read the hash from the generated JSON and append it to the sprite URL.

{
  "icons/social.svg": "75b76133",
  "icons/sprite.svg": "95c11cc9"
}

Summary by Sourcery

Add cache-busting support for SVG sprite icons using a generated hash manifest.

New Features:

• Generate a JSON manifest of SVG sprite content hashes during the webpack build.
• Append sprite-specific cache-busting hashes to SVG icon URLs in the Svg service.

Enhancements:

• Introduce a custom SpriteHashPlugin webpack plugin to hash SVG sprites and write the manifest file.
• Extend the Svg service with a helper to read sprite hashes from the generated manifest file.

---

Note

Medium Risk
Touches the asset build pipeline and changes how SVG sprite URLs are generated, so incorrect hashing/manifest generation could lead to stale or broken icon references in production.

Overview
Adds a custom webpack SpriteHashPlugin that, after build emit, hashes each dist/icons/*.svg sprite and writes a PHP manifest (dist/sprite-hashes.asset.php) mapping sprite paths to short content hashes.

Updates the Svg service to load this manifest once, append the matching hash as a v query param on sprite URLs in rendered <use href=...>, and expands KSES-allowed SVG attributes to include width/height.

^{Written by Cursor Bugbot for commit ce82a75. This will update automatically on new commits. Configure here.}

[sourcery-ai]

Reviewer's Guide

Adds a Webpack plugin that generates a JSON manifest of content hashes for SVG sprite files and updates the Svg service to read this manifest and append a cache-busting query parameter to sprite URLs.

Sequence diagram for Webpack build generating sprite-hashes.json

sequenceDiagram
    participant WebpackCompiler
    participant SpriteHashPlugin
    participant FileSystem

    WebpackCompiler->>SpriteHashPlugin: trigger afterEmit hook
    SpriteHashPlugin->>FileSystem: exists(spriteDir)
    alt spriteDir does not exist
        SpriteHashPlugin-->>WebpackCompiler: log warning and callback
    else spriteDir exists
        SpriteHashPlugin->>FileSystem: readDir(spriteDir)
        FileSystem-->>SpriteHashPlugin: list svgFiles
        loop for each svgFile
            SpriteHashPlugin->>FileSystem: readFile(filePath)
            FileSystem-->>SpriteHashPlugin: svgContent
            SpriteHashPlugin->>SpriteHashPlugin: compute md5 hash
            SpriteHashPlugin->>SpriteHashPlugin: store relativePath -> hash
        end
        SpriteHashPlugin->>FileSystem: writeFile(outputFile, hashesJson)
        FileSystem-->>SpriteHashPlugin: write complete
        SpriteHashPlugin-->>WebpackCompiler: callback
    end

Loading

Sequence diagram for Svg service resolving sprite URL with hash

sequenceDiagram
    participant Template
    participant Svg as SvgService
    participant FileSystem

    Template->>Svg: get_the_icon(icon_class, additionnal_classes)
    Svg->>Svg: normalize icon_class to icon_slug
    Svg->>Svg: build css classes
    Svg->>Svg: get_sprite_hash(sprite_name)
    Svg->>FileSystem: get_theme_file_path(sprite_hash_file)
    Svg->>FileSystem: is_readable(sprite_hash_file)
    alt sprite-hashes.json not readable
        Svg-->>Svg: return empty hash string
    else readable
        Svg->>FileSystem: file_get_contents(sprite_hash_file)
        FileSystem-->>Svg: jsonContent
        Svg->>Svg: json_decode(jsonContent)
        alt hash for sprite exists
            Svg-->>Svg: return ?hash
        else missing hash
            Svg-->>Svg: return empty hash string
        end
    end
    Svg->>Svg: build spriteUrl with optional hash
    Svg-->>Template: svg markup with use href spriteUrl#icon_slug

Loading

Class diagram for SpriteHashPlugin and updated Svg service

classDiagram
    class SpriteHashPlugin {
        +object options
        +SpriteHashPlugin(options)
        +apply(compiler)
    }

    class Svg {
        +get_the_icon(icon_class, additionnal_classes)
        +allow_svg_tag(tags)
        +get_sprite_hash(sprite_name)
    }

    class FileSystem {
        +readFile(path)
        +writeFile(path, content)
        +readDir(path)
        +exists(path)
    }

    SpriteHashPlugin ..> FileSystem : uses
    Svg ..> FileSystem : uses

Loading

Flow diagram for build and runtime usage of sprite hash manifest

flowchart LR
    subgraph Build
        A["Webpack build"] --> B["SpriteHashPlugin afterEmit"]
        B --> C["Compute hashes for dist/icons svg files"]
        C --> D["Write dist/sprite-hashes.json"]
        C --> E["Output dist/icons sprite svg files"]
    end

    subgraph Runtime
        F["Theme templates call Svg service"] --> G["Svg.get_sprite_hash reads sprite-hashes.json"]
        G --> H["Svg.get_the_icon builds sprite url with ?hash"]
        H --> I["Browser requests dist/icons sprite.svg?hash"]
    end

    D --> G
    E --> I

Loading

File-Level Changes

Change	Details	Files
Append sprite-specific cache-busting hash to SVG hrefs in the Svg service.	Compute icon CSS classes as before but also load a hash for the sprite name via a new helper method. Include the computed hash string between the sprite URL and the fragment identifier in the href attribute. Return an empty hash string when no hash is available so existing URLs still work.	inc/Services/Svg.php
Add a helper in the Svg service to read sprite hashes from a generated JSON manifest.	Locate the sprite-hashes.json file from the theme dist directory using get_theme_file_path. Safely handle unreadable or missing files by returning an empty string. Decode the JSON into an array and look up the hash using the relative icons/.svg path key. Prefix the found hash with a '?' so it can be concatenated directly into the URL as a query parameter.	inc/Services/Svg.php
Introduce and wire up a Webpack plugin that generates a sprite-hashes.json manifest from SVG sprite contents.	Create SpriteHashPlugin that scans a configured sprite directory for .svg files after emit. For each SVG file, compute an md5 content hash truncated to a configurable length and store it under an icons/.svg key. Write the collected hashes to a configurable output JSON file (default dist/sprite-hashes.json), logging summary info and warning if the sprite directory is missing. Register the new SpriteHashPlugin in the Webpack plugins configuration so it runs on builds.	config/sprite-hash-plugin.js config/plugins.js

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• In Svg::get_sprite_hash, the JSON file is read and decoded on every call; consider caching the decoded hash map in a property (or memoizing per request) to avoid repeated disk I/O and JSON parsing when many icons are rendered on a page.
• The key used for lookup in get_sprite_hash (sprintf('icons/%s.svg', $sprite_name)) is duplicated multiple times; computing it once and reusing the variable would simplify the logic and reduce the chance of typos if the format changes.
• The webpack SpriteHashPlugin uses console.log/console.warn and synchronous fs calls inside afterEmit.tapAsync; consider switching to compiler.getInfrastructureLogger for logging and wrapping fs operations in try/catch with proper callback(err) handling to avoid noisy output or silent failures in builds.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `Svg::get_sprite_hash`, the JSON file is read and decoded on every call; consider caching the decoded hash map in a property (or memoizing per request) to avoid repeated disk I/O and JSON parsing when many icons are rendered on a page.
- The key used for lookup in `get_sprite_hash` (`sprintf('icons/%s.svg', $sprite_name)`) is duplicated multiple times; computing it once and reusing the variable would simplify the logic and reduce the chance of typos if the format changes.
- The webpack `SpriteHashPlugin` uses `console.log`/`console.warn` and synchronous fs calls inside `afterEmit.tapAsync`; consider switching to `compiler.getInfrastructureLogger` for logging and wrapping fs operations in try/catch with proper `callback(err)` handling to avoid noisy output or silent failures in builds.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[cedric07]

@firestar300 ça peut-être implémenté sur les projets en cours ?

[firestar300]

@firestar300 ça peut-être implémenté sur les projets en cours ?

Oui mais attention non compatible avec le bloc icône. C'est surtout pour les services the_icon() et get_the_icon().

C'est encore mieux si tu peux l'intégrer sur un projet et faire des retours si tu vois des bugs.