SVG icons became black and badly sized and centered after gulp-svgmin update

[stephanegigandet]

Describe the bug

On the current main branch (but not in the branch deployed on production), SVG icons are black and badly sized and centered:

To Reproduce

https://world.openfoodfacts.net/

Expected behavior

Icons should have the right color and be correctly sized and centered:

Screenshots

No response

Additional context

No response

Type of device

Browser

Browser version

No response

Number of products impacted

No response

Time per product

No response

[stephanegigandet]

Before:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false">

After:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">

Maybe a recent update of svgmin.

[stephanegigandet]

Probably due to this update: #6604

[stephanegigandet]

These instructions seem to no longer work:

function icons() {
  return src("*.svg", { cwd: "./icons" }).
    pipe(
      svgmin({
      plugins: [
        {
          name: "removeViewBox",
          active: false
        },
        {
          name: "removeDimensions",
          active: true,
        },

[stephanegigandet]

All the svgo modules seem to now be ignored, even though the syntax looks correct.

[stephanegigandet]

One thing we could do is to add 1 test to check that generated SVGs have a viewbox and don't have width and height.

[stephanegigandet]

Apparently it is a known issue since November 2021: ben-eb/gulp-svgmin#125

Good news: there seem to be workarounds :)