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

Parameter	Required	Type	Default	Description
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

Input

{
  "icons": {
    "menu": {
      "$type": "vector",
      "$value": {
        "default": {
          "variationLabel": null,
          "format": "svg",
          "url": "<url-of-your-svg-file>"
        }
      }
    }
  }
}

Config

Output

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

Input

{
  "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>"
          }
        }
      }
    }
  }
}

Config

Output