Struggling with SVGO options

[tizzle]

Hi, i'm having trouble getting the svgo options to work.
I tried the following:

module.exports = withPlugins(
  [
    withFonts,
    [withOptimizedImages, {
      svgo: {
        plugins: [
          { removeTitle: true },
          { convertPathData: false },
          { removeUselessStrokeAndFill: true },
          { removeAttrs: { attrs: '(stroke|fill)' } },
        ]
      }
    }]
  ],
  nextConfig
);

I then use the ?icon as described in the docs:

import CartIconSVG from '~/assets/icons/cart.svg?sprite';

The SVG displays fine, the sprite is added to the DOM, but titles are not stripped from the resulting SVGs.

Any help is appreciated!

[tizzle]

Ok. Stupid me. I completely overlooked the optimizeImagesInDev option.
This has to be set to true to see the proper results in dev. Might be worth a mention in the svgo section of the docs.

This works for me:

module.exports = withPlugins(
  [
    withFonts,
    [withOptimizedImages, {
      optimizeImagesInDev: true,
      svgo: {
        plugins: [
          { removeTitle: true },
          { convertPathData: false },
          { removeUselessStrokeAndFill: true },
          { removeAttrs: { attrs: '(stroke|fill)' } },
        ]
      }
    }]
  ],
  nextConfig
);

Thanks for the great work with next-optimized-images!

[cyrilwanner]

Hi @tizzle
I'm sorry that this was not clear in the readme, but cool that you could figure it out in the end :)
Thanks for your issue, I will keep that in mind when I update the readme for version 2 of next-optimized-images which will be released in the next few days. I think the whole svgo section can be improved, with examples on how to enable/disable plugins (might not be clear if you didn't use it before)..