feat: Add suffixPattern and doesPreserveClasses parameters to addClassesToSVGElement plugin
This PR adds a suffixPattern parameter to the addClassesToSVGElement plugin, which allows adding of a suffix to the custom classes added on the SVG element.
This PR also adds a doesPreserveClasses parameter, which when true will retain the existing classes on the SVG element, otherwise it will clear the existing classes and only use those from any className and suffixPattern parameters passed into the plugin.
A better way to do this would be to have the addClassesToSVGElement plugin accept Array<string|function> instead of just a string[]. The function can have the same signature as the function for prefixIds ((node, info) => string).
Then you could do the following:
module.exports = {
plugins: [
{
name: "addClassesToSVGElement",
params: {
classNames: [
'my-svg-icon',
(_, info) => `my-svg-icon__${info?.path?.split('.')[0]}`,
]
}
}
]
}
The benefits to this approach is that:
- It's consistent with the
prefixIdsplugin. - We don't add one-off special handling unique to this plugin, like what you did with
$FILENAME. - Users have much more control in general, rather than specifically a suffix.
- The way you've currently implemented this, it seems very specific to your personal workflow, while the new approach is easier to adapt for others.
Would you care to give this approach a shot and update your PR?
Alternatively, you could also review the prefixIds plugin and keep in mind it supports custom functions and see if you can achieve something to suit your needs with that:
module.exports = {
js2svg: {
pretty: true,
indent: 2,
},
plugins: [
{
name: 'prefixIds',
params: {
prefix: (node, info) => {
console.log(node, info);
}
}
}
]
}