JSONToTable

Loading TSX to SVG Converter...

TSX to SVG Converter - Export TypeScript React Components to Standard SVG

Icons often end up living inside a TypeScript React codebase as TSX components, and sooner or later someone needs the plain .svg back, for a designer, a docs site or a project that doesn't use React. Paste the component here and you get the markup of its <svg> element with React's prop names turned back into SVG attributes: strokeWidth becomes stroke-width, className becomes class, xlinkHref becomes xlink:href. SVG's own mixed-case names such as viewBox stay exactly as they are. Going the other way? The SVG to TSX converter does that.

How to Convert TSX to SVG - Step by Step Guide

1

Paste the TSX Component

Paste the whole file or only the <svg>…</svg> part, or upload a .tsx file. Imports, interfaces, React.FC annotations, generics and as casts are all fine; they just don't show up in the SVG. Working in plain JavaScript? The JSX to SVG converter is the same tool. If the code won't parse, the TSX validator can help track the problem down.

2

The First <svg> Is Converted

A moment after you stop typing, the first <svg> element in your code is written out as SVG. Values in braces are filled in when they can be read from the source without running it: {2}, {14.50}, template strings, default props like ({ size = 24 }) and const declarations. Numbers keep the exact digits you typed. For the opposite direction with plain HTML, see the HTML to TSX converter or the TSX to HTML converter.

3

Read the Notes Under the Output

Some things only exist while a React app is running: a fill that comes from a prop without a default, {...props}, a .map() over data, or another component like <Logo />. Those are left out rather than guessed, and each one is listed in a note under the output. Children that were left out are marked with an XML comment in the SVG, so you can see where they belonged. Event handlers such as onClick are always removed.

4

Copy or Download the SVG

Copy the result or download it as icon.svg. Before anything is shown it goes through an XML parser, and the SVG namespace is added to the root if your component left it out, so the file opens as an image in a browser or design tool. To tidy the source first, there's a TSX formatter and a TSX minifier.

Frequently Asked Questions

How do I convert a TypeScript React icon component to an SVG file?

Paste the whole .tsx file, or just the <svg>…</svg> part, into the input editor. The converter reads it as TypeScript and JSX, finds the first <svg> element and writes it out as plain SVG markup a moment after you stop typing. Copy the result or download it as icon.svg.

Which attribute names change?

Only the ones React spells differently from SVG. className becomes class, xlinkHref becomes xlink:href, xmlSpace becomes xml:space, and the presentation props such as strokeWidth, fillOpacity, stopColor, clipPath and fontFamily get their dashed SVG names. Names that SVG itself writes in mixed case stay as they are, so viewBox, preserveAspectRatio, gradientUnits and stdDeviation come through untouched, and so do data-* and aria-* attributes.

What happens to props, variables and {…} expressions?

Nothing in your code is run. A value is filled in only when it can be read straight from the source: literals like {2} or {14.50} (numbers keep the digits you typed), template strings, default props such as ({ size = 24 }), and const declarations. Anything that is only known at run time, like a prop without a default, {...props}, .map() loops, conditions or other components, is left out and listed in a note under the output, and children are marked with an XML comment so you can see where they were.

Are TypeScript types a problem?

No. Interfaces, generics such as forwardRef<SVGSVGElement, Props>, React.FC annotations and as / satisfies casts are understood and simply don't appear in the SVG. If the code has a syntax error, you get the line and column and the line itself, instead of half-converted output.

Will the downloaded file open in a browser or design tool?

The output is checked with a real XML parser before it is shown, and the SVG namespace (plus xlink: when it is used) is added to the root element if your component left it out. Without that namespace a .svg file does not display as an image, which is a common surprise with React icons. Values that were left out, like a fill that came from a prop, may still need filling in by hand.

What about inline styles and event handlers?

A style object such as style={{ strokeWidth: 2, opacity: 0.5 }} is turned into a CSS string, with px added the way React adds it. onClick and other event handlers are removed, since an SVG file has no way to hold a React function. Styling from CSS modules or styled-components lives outside the markup, so it has to be added to the SVG separately.

What's the difference between TSX to SVG and JSX to SVG?

They use the same converter, so TypeScript works on both pages. This one is labelled for .tsx files; the JSX to SVG page is the same tool for plain JavaScript components.

Related Tools

TSX Formatter

Format and beautify TSX/TypeScript React code with proper indentation

TSX Fixer

Fix broken TSX automatically, repair TypeScript React component errors, type annotations, and JSX syntax

HTML to TSX Converter

Convert HTML to TSX/TypeScript React format instantly

Markdown to TSX Converter

Convert Markdown to TypeScript React TSX components for type-safe content

TSX Validator

Validate TSX syntax and TypeScript React component structure

TSX to JSX Converter

Convert TypeScript TSX to plain JSX

TSX Minifier

Minify TSX/TypeScript React code for production builds

TSX to HTML Converter

Convert React TypeScript TSX to standard HTML