import path from 'node:path' export default { multipass: true, js2svg: { pretty: true, indent: 2, eol: 'lf' }, plugins: [ { name: 'preset-default', params: { overrides: { removeUnknownsAndDefaults: { keepDataAttrs: false, // remove all `data` attributes keepRoleAttr: true // keep the `role` attribute }, removeViewBox: false // keep the `viewBox` attribute } } }, // The next plugins are included in svgo but are not part of preset-default, // so we need to explicitly enable them 'cleanupListOfValues', { name: 'removeAttrs', params: { attrs: [ 'clip-rule', 'fill' ] } }, // Custom plugin which resets the SVG attributes to explicit values { name: 'explicitAttrs', type: 'visitor', params: { attributes: { xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', fill: 'currentColor', class: '', // We replace the class with the correct one based on filename later viewBox: '0 0 16 16' } }, fn(_root, params, info) { if (!params.attributes) { return null } const basename = path.basename(info.path, '.svg') return { element: { enter(node, parentNode) { if (node.name === 'svg' && parentNode.type === 'root') { // We set the `svgAttributes` in the order we want to, // hence why we remove the attributes and add them back node.attributes = {} for (const [key, value] of Object.entries(params.attributes)) { node.attributes[key] = key === 'class' ? `bi bi-${basename}` : value } } } } } } } ] }