svgo icon indicating copy to clipboard operation
svgo copied to clipboard

Allow adding of suffixes to class names

Open anselmbradford opened this issue 2 years ago • 1 comments

Describe the solution you'd like

I am currently adding a generic class like my-svg-icon to each SVG. It would be nice to also be able to add a custom class specific to each icon, so that the class names were something like my-svg-icon my-svg-icon__cat, for the icon cat.svg or whatever.

There's the addClassesToSVGElement plugin to add classes to each SVG file. There's the prefixIds plugin to add a prefix of the filename to each SVG file.

However, I don't see a way through these two plugins to add a suffix to each SVG class name that would be specific to each SVG processed.

anselmbradford avatar Mar 07 '23 17:03 anselmbradford

PR --> https://github.com/svg/svgo/pull/1757

anselmbradford avatar Mar 07 '23 19:03 anselmbradford

I've addressed this using the solution I proposed in https://github.com/svg/svgo/pull/1757#issuecomment-1928466959. You should be able to use a config like this in the next version of SVGO:

module.exports = {
  plugins: [
    {
      name: "addClassesToSVGElement",
      params: {
        classNames: [
          'my-svg-icon',
          (_, info) => `my-svg-icon__${info?.path?.split('.')[0]}`,
        ]
      }
    }
  ]
}

Feel free to file another issue if you encounter any problems.

SethFalco avatar Mar 01 '24 00:03 SethFalco