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;
    tsx?: boolean;
    filePrefix?: string;
    fileSuffix?: string;
    exportDefault?: boolean;
    tokenNameTemplate?: 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	''	Add an arbitrary content at the beginning of the generated file.
fileSuffix	false	string	''	Add an arbitrary content at the end of the generated file.
exportDefault	false	boolean	true	Whether use named or default export.
tokenNameTemplate	false	string	'{{token}}'	Change the template of the generated named export.

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