svg-to-jsx

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

Interface

interface parser {
  name: 'svg-to-jsx';
  output: {
    type: 'directory';
    directoryPath: string;
  };
  options?:{
    reactVersion?: string; // default to 17.0.0
    tsx?: boolean; // default to false
    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.
tsx	false	boolean	false	Set this to true if you want to generate a TSX component instead of JSX.
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

{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate JSX components",
      "parsers": [
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}

Output

output/assets/icons/menu.jsx

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>
);