to-svg-file
This parser helps you generate SVG files from your vector assets.
Interface
interface parser {
name: 'to-svg-file';
options: {
filenameTemplate: string;
};
output: {
type: 'directory';
directoryPath: string;
};
}Options
filenameTemplate
false
string
"{{parents}}/{{name}}[-{{mode}}]{{extension}}"
The mustache template used to generate the file path to write to the file system.
Available variables:
parents: group and collection names of the token's parents
name: the name of the asset token
mode: the name of the current mode
extension: the file extension extracted from the token
Basic usage - Single mode
Our vector has a default mode and is in a group named "icons".
The parser will generate the following output: {directoryPath}/{groups}/{vectorName}.svg
{
"icons": {
"menu": {
"$type": "vector",
"$value": {
"default": {
"variationLabel": null,
"format": "svg",
"url": "<url-of-your-svg-file>"
}
}
}
}
}Advanced usage - Multiple modes
Our vector has a 2 modes: light and dark and is in a group named "icons".
The parser will generate one file per mode:
{directoryPath}/{groups}/{vectorName}-{mode1}.svg{directoryPath}/{groups}/{vectorName}-{mode2}.svg
{
"asset": {
"$collection": {
"$modes": [
"light",
"dark"
]
},
"icons": {
"menu": {
"$type": "vector",
"$value": {
"light": {
"variationLabel": null,
"format": "svg",
"url": "<url-of-your-svg-file>"
},
"dark": {
"variationLabel": null,
"format": "svg",
"url": "<url-of-your-svg-file>"
}
}
}
}
}
}Last updated
Was this helpful?