Links

svgo

This parser help you optimize and transform your SVG strings with svgo.

Interface

interface Parser {
name: "svgo";
output: {
type: "directory";
directoryPath: string;
};
options?: {
// https://github.com/svg/svgo/blob/main/lib/svgo.d.ts#L29-L49
svgo?: Config;
};
}

Options

Parameter
Required
Type
Default
Description
svgo
false
null
The svgo configuration.

Basic usage

Input
Config
Output
1
{
2
"icons": {
3
"array": {
4
"$type": "vector",
5
"$value": {
6
"default": {
7
"variationLabel": null,
8
"format": "svg",
9
"url": "https://static.specifyapp.com/sdtf-seeds/array.svg"
10
}
11
}
12
}
13
}
14
}
menu.svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M9.25 9.25V3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V9.25H9.25ZM9.25 10.75H3.5V16C3.5 16.2761 3.72386 16.5 4 16.5H9.25V10.75ZM10.75 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V10.75H10.75V16.5ZM4 18C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H10H16C17.1046 2 18 2.89543 18 4V10V16C18 17.1046 17.1046 18 16 18H4ZM16.5 9.25V4C16.5 3.72386 16.2761 3.5 16 3.5H10.75V9.25H16.5Z" fill="#788BA5" />
</svg>
{
"name": "Optimize and transform SVG with svgo + Generate SVG files",
"parsers": [
{
"name": "svgo",
"output": {
"type": "directory",
"directoryPath": "output/assets"
},
"options": {
"svgo": {
"plugins": [
{
"name": "removeDimensions"
},
{
"name": "convertColors",
"params": {
"currentColor": true
}
}
]
}
}
}
]
}
menu.svg
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 9.25V3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V9.25H9.25ZM9.25 10.75H3.5V16C3.5 16.2761 3.72386 16.5 4 16.5H9.25V10.75ZM10.75 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V10.75H10.75V16.5ZM4 18C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H10H16C17.1046 2 18 2.89543 18 4V10V16C18 17.1046 17.1046 18 16 18H4ZM16.5 9.25V4C16.5 3.72386 16.2761 3.5 16 3.5H10.75V9.25H16.5Z" fill="currentColor" />
</svg>