svg-to-tsx

This parser helps you generate TSX components from your vector assets.

Interface

interface parser {
  name: 'svg-to-tsx';
  output: {
    type: 'directory';
    directoryPath: string;
  };
  options?:{
    reactVersion?: string; // default to 17.0.0
    filePrefix?: string;
    fileSuffix?: string;
  }
}

Options

Parameter	Required	Type	Default	Description
reactVersion	false	string	17.0.0	The React version you're using. Depending on your version, this parser will automatically import React in your JSX component.
filePrefix	false	string	null	Add an arbitrary content at the beginning of the generated file.
fileSuffix	false	string	null	Add an arbitrary content at the end of the generated file.

Basic usage

Input

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

Config

.specifyrc.json

{
  "name": "Generate vectors as TSX components",
  "parsers": [
    {
      "name": "svg-to-tsx",
      "output": {
        "type": "directory",
        "directoryPath": "output/assets"
      }
    }
  ]
}

Output

output/assets/icons/menu.tsx

export default () => (
    <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>
);