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

Output