SVG React Preview

Render the JSX/TSX <svg> under your cursor as a real SVG inside a VS Code side panel — no save, no build, no roundtrip to the browser.

Install

This extension is published to the Open VSX Registry, which is the default registry for VSCodium, Cursor, Eclipse Theia, and other open-source VS Code distributions. It is not on the Microsoft VS Code Marketplace — see Known limitations below.

VSCodium / Cursor / Theia — install through the in-editor extensions panel by searching for "SVG React Preview", or:

codium --install-extension segodnya.svg-react-preview
cursor --install-extension segodnya.svg-react-preview

Microsoft VS Code — download the .vsix from the GitHub Releases page and install manually:

code --install-extension svg-react-preview-0.1.0.vsix

Usage

1. Open any .tsx or .jsx file containing a <svg> JSX expression.
2. Place the cursor inside the <svg> you want to preview.
3. Run SVG React Preview: Preview at Cursor — from the editor context menu (right-click) or from the Command Palette (⇧⌘P / Ctrl+Shift+P).

A side panel opens with the rendered SVG, the source filename, and a list of any non-fatal warnings emitted while normalizing the JSX.

Behaviour

The extension parses your JSX and rewrites it into static SVG that a webview can render directly. The most common transforms:

• className → class; camelCase props → kebab-case (strokeWidth → stroke-width); xlinkHref → xlink:href. SVG-native camelCase names like viewBox are preserved.
• Event handlers, dangerouslySetInnerHTML, and spread props are dropped.
• Dynamic sizes (width={size}) collapse to "24"; dynamic colours (fill={c}) collapse to "currentColor"; other dynamic attributes are dropped.
• style={{ strokeWidth: 2 }} is flattened to a CSS string. Dynamic style entries are dropped with a warning.
• PascalCase components inside the tree are replaced with a dashed placeholder <rect/> and a warning.
• && and ternary expressions resolve to their JSX branch; .map() iterations are dropped with a warning.
• Fragments (<>…</>, <React.Fragment>) are unpacked.
• A non-<svg> root (a bare <path>, a fragment, or a component placeholder) is wrapped in <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">.

Known limitations

• Snapshot only — the preview does not live-update when the source changes.
• No multi-file resolution — imported icon components render as placeholders.
• No CSS Modules / styled-components support — only inline style={{…}} objects.
• Identifier expressions in children ({children}, {icon}) are dropped silently.
• Published to Open VSX only — not on the Microsoft VS Code Marketplace. Microsoft VS Code users have to install the .vsix manually from GitHub Releases (see Install).

Related

The behaviour is portable from the upstream Rust project: https://github.com/segodnya/svg-react-preview. Fixtures and normalization rules in this extension match that project's outputs byte-for-byte.

Releasing

See RELEASING.md.