svgo
svgo copied to clipboard
Allow adding of suffixes to class names
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.
PR --> https://github.com/svg/svgo/pull/1757
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.