diff --git a/plugins/addClassesToSVGElement.js b/plugins/addClassesToSVGElement.js index a36346d5e..c32a0f25d 100644 --- a/plugins/addClassesToSVGElement.js +++ b/plugins/addClassesToSVGElement.js @@ -49,9 +49,9 @@ plugins: [ * * @type {import('./plugins-types.js').Plugin<'addClassesToSVGElement'>} */ -export const fn = (root, params) => { +export const fn = (root, params, info) => { if ( - !(Array.isArray(params.classNames) && params.classNames.some(String)) && + !(Array.isArray(params.classNames) && params.classNames.length !== 0) && !params.className ) { console.error(ENOCLS); @@ -69,7 +69,11 @@ export const fn = (root, params) => { ); for (const className of classNames) { if (className != null) { - classList.add(className); + const classToAdd = + typeof className === 'string' + ? className + : className(node, info); + classList.add(classToAdd); } } node.attributes.class = Array.from(classList).join(' '); diff --git a/plugins/plugins-types.d.ts b/plugins/plugins-types.d.ts index 246ea6249..b5b7ae51a 100644 --- a/plugins/plugins-types.d.ts +++ b/plugins/plugins-types.d.ts @@ -273,8 +273,10 @@ export type BuiltinsWithRequiredParams = { attributes?: Array>; }; addClassesToSVGElement: { - className?: string; - classNames?: string[]; + className?: string | ((node: XastElement, info: PluginInfo) => string); + classNames?: Array< + string | ((node: XastElement, info: PluginInfo) => string) + >; }; removeAttributesBySelector: any; removeAttrs: { diff --git a/test/plugins/addClassesToSVGElement.test.js b/test/plugins/addClassesToSVGElement.test.js new file mode 100644 index 000000000..c40b75205 --- /dev/null +++ b/test/plugins/addClassesToSVGElement.test.js @@ -0,0 +1,36 @@ +import { optimize } from '../../lib/svgo.js'; + +test('should accept function as className parameter', () => { + const svg = ``; + + expect( + optimize(svg, { + path: 'uwu.svg', + plugins: [ + { + name: 'addClassesToSVGElement', + params: { + classNames: [ + 'icon', + (_, info) => `icon__${info?.path?.split('.')[0]}`, + ], + }, + }, + ], + }).data, + ).toBe(``); + + expect( + optimize(svg, { + path: 'uwu.svg', + plugins: [ + { + name: 'addClassesToSVGElement', + params: { + className: (_, info) => `icon__${info?.path?.split('.')[0]}`, + }, + }, + ], + }).data, + ).toBe(``); +});