SVG to React Converter

Convert raw SVG markup into React-friendly JSX automatically while you paste, or manually from the Command Palette.

Why this extension

SVG from design tools usually needs cleanup before React can use it:

• class must become className
• kebab-case attributes like stroke-width must become strokeWidth
• metadata like xmlns and version is often unnecessary

This extension removes that repetitive cleanup step.

Features

1. Auto-convert on paste

When you paste SVG content containing <svg in supported files, the extension transforms it immediately.

2. Manual conversion command

Use the command:

SVG to React: Convert SVG

It converts the currently selected SVG block.

3. JSX-compatible attribute conversion

Examples:

• class -> className
• stroke-width -> strokeWidth
• fill-rule -> fillRule
• clip-path -> clipPath
• stop-color -> stopColor

General rule: kebab-case and snake_case attributes are converted to camelCase.

4. SVG cleanup

The transformer removes:

• xmlns
• xmlns:xlink
• version

Supported files

Auto and manual conversion run only in:

• .ts
• .tsx
• .js
• .jsx

Example

Input:

<svg xmlns="http://www.w3.org/2000/svg" class="icon" stroke-width="2" fill-rule="evenodd">
	<path d="M1 1h2v2H1z" />
</svg>

Output:

<svg className="icon" strokeWidth="2" fillRule="evenodd">
	<path d="M1 1h2v2H1z"/>
</svg>

Usage

Automatic

1. Open a supported file (.ts, .tsx, .js, .jsx).
2. Paste SVG markup.
3. The content is converted in-place.

Manual

1. Select SVG text in a supported file.
2. Open Command Palette (Ctrl+Shift+P).
3. Run SVG to React: Convert SVG.

Requirements

• VS Code ^1.110.0

Extension settings

This version does not contribute custom settings yet.

Known limitations

• Conversion is intentionally focused on JSX compatibility and basic cleanup.
• Advanced SVG optimization (for example full minification or path optimization) is not included yet.

Development

Install dependencies:

npm install

Watch mode:

npm run watch

Run extension tests:

npm test

Release notes

See the changelog in this project for version history.