Specify Docs
Specify ↗︎Changelog ↗︎Guide ↗︎
V2
V2
  • Getting started
    • Introduction
    • What is Specify?
    • Pulling your first tokens with the CLI
    • Glossary
  • Collect
    • What is a Source?
    • Available sources
      • Figma Variables & Styles
      • Tokens Studio
  • Distribute
    • What is a Destination?
    • Available destinations
      • GitHub
      • Specify CLI
      • Specify SDK
      • HTTP API
  • Concepts
    • Overview
    • Parsers Engine
    • SDTF Client
      • SDTF Engine
    • Specify Design Token Format
  • Guides
    • Configuration file 101
    • Specify CLI usage 101
      • Getting started
      • Authentication
      • Generate Files
    • Specify SDK usage 101
      • Getting started
      • Retrieving and working with the tokens
      • Updating tokens
      • Converting a token to XXX
      • Executing generation parsers
    • Specify SDK Cheatsheet
    • Manage font files
    • Querying a SDTF graph
  • Reference
    • Parsers Engine
    • Parsers
      • change-case
      • convert-color
      • convert-dimension
      • make-line-height-relative
      • filter
      • register-view
      • select-modes
      • prefix-by
      • suffix-by
      • replace-string
      • to-css-custom-properties
      • to-css-text-style
      • to-css-font-import
      • to-flutter
      • to-javascript
      • to-json
      • to-json-list
      • to-kotlin
      • to-react-native
      • to-scss-mixin-text-style
      • to-scss-map
      • to-sdtf
      • to-style-dictionary
      • to-swift
      • to-tailwind
      • to-typescript
      • svgo
      • svg-to-jsx
      • svg-to-tsx
      • to-svg-file
      • to-bitmap-file
      • to-file
    • Specify SDK
      • SpecifyClient
      • SDTFClient
      • Converters
        • CSS
      • ParsersEngineResults
    • SDTF Engine
      • Query API
      • Mutation API
      • SDTF Query Language
      • SDTF QueryResult
      • TokenState
        • Stateful Value
    • HTTP API
      • POST /parsers-engine-rpc
    • Specify CLI
  • Resources
    • Parser Rules templates
      • CSS Custom Properties
      • Tailwind
      • React Native
      • Flutter
      • SDTF
      • JSON
    • Specify CLI VS Specify SDK
    • Playground
    • Best practices
  • Useful links
    • Discord
    • YouTube
    • Twitter
    • Help Center
    • Canny
Powered by GitBook
On this page
  • Interface
  • Options
  • Basic usage

Was this helpful?

Export as PDF
  1. Reference
  2. Parsers

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

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

{
  "icons": {
    "menu": {
      "$type": "vector",
      "$value": {
        "default": {
          "variationLabel": null,
          "format": "svg",
          "url": "<url-of-your-svg-file>"
        }
      }
    }
  }
}
.specifyrc.json
{
  "name": "Generate vectors as TSX components",
  "parsers": [
    {
      "name": "svg-to-tsx",
      "output": {
        "type": "directory",
        "directoryPath": "output/assets"
      }
    }
  ]
}
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>
);
Previoussvg-to-jsxNextto-svg-file

Last updated 1 year ago

Was this helpful?

17.0.0