1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
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
}
}
}
}
}
}
}
]
}
|
