jsx2svg

The first and only tool that converts JSX/TSX React components into clean SVG files.
Until now, every tool only went the other way—SVG to JSX. This solves the opposite problem: extracting real SVG from React components preserving gradients, paths, and all valid SVG attributes.

Description

jsx2svg is a lightweight CLI and programmatic library that extracts raw SVG markup directly from JSX or TSX React components.
It’s perfect for developers who want to migrate inline SVGs in React components to static SVG files, optimize performance, or integrate with traditional HTML <img> tags.

Install

npm install -g jsx2svg

or in a project:

npm install jsx2svg

CLI Usage

jsx2svg <input> [output]

Convert a single file

jsx2svg Icon.tsx Icon.svg

Convert a directory

jsx2svg ./components ./svg-output

If no output folder is provided, it defaults to ./svg-output.

Programmatic Usage

import { extractSVGFromJSX } from "jsx2svg";

const svgString = extractSVGFromJSX(jsxString);

Use Cases & Benefits

• Migrate React inline SVGs to static files for easier use in traditional HTML or CMS.
• Use <img> tags instead of embedding JSX everywhere and benefit from caching.
• Optimize performance by pre-rendering SVGs.
• Easily integrate SVG assets into design systems without React.
• Automate bulk conversion of a whole folder of components to SVG.
• Keep attributes clean and correct: converts JSX props to proper SVG attributes automatically.
• Works with TSX and JSX files, including props and gradients.

Testing

npm test

License

MIT