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

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate SVG files",
      "parsers": [
        {
          "name": "to-svg-file",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}

Output

output/assets/icons/menu.svg

<svg width="20" height="20" viewBox="0 0 20 20" 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" />
</svg>

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

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate SVG files",
      "parsers": [
        {
          "name": "to-svg-file",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}

Output

output/assets/icons/menu-light.svg

<svg width="20" height="20" 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="#788BA5" />
</svg>

output/assets/icons/menu-dark.svg

<svg width="20" height="20" 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="#555AAA" />
</svg>