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

Output