VS Code & Cursor Extension

The STR editor extension automatically converts pasted SVGs into clean React components with Tailwind classes directly inside .tsx, .jsx, .ts, and .js files.

Key Features

• Instant Paste Interception: Uses standard DocumentPasteEditProvider to intercept SVG markup and convert it on the fly.
• Fast Pre-Check Bailout: Evaluates isConvertibleSvg() in under 0.01 ms. Non-SVG text, code snippets, and plain text pastes are completely ignored and untouched.
• Single Undo Step & Paste As Control: All edits are bundled in one atomic transaction. Pressing Cmd+Z / Ctrl+Z on converted selections cleanly reverts back to the raw SVG in one step. When pasting, you can also press Ctrl+. / Cmd+. to toggle the VS Code Paste Widget and switch back to raw text.
• Compatible Everywhere: Uses strictly standard VS Code APIs. Compatible with VS Code, Cursor, Windsurf, and VSCodium.

Installation

From VS Code Marketplace

In VS Code, search for STR or run:

code --install-extension everywhereayush.str-vscode

From OpenVSX (Cursor, Windsurf, VSCodium)

Cursor and VSCodium fetch extensions from OpenVSX:

cursor --install-extension everywhereayush.str-vscode

[!NOTE] Cursor Users: Cursor disables VS Code's editor.pasteAs.enabled setting by default. To enable automatic conversion on paste in Cursor, ensure "editor.pasteAs.enabled": true is set in your Cursor settings (settings.json). The extension will also offer a prompt to enable this on first launch.

Commands

Access these commands from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

1. STR: Convert Selection: Converts highlighted SVG markup into a React component in place.
2. STR: Convert Clipboard: Reads SVG markup from your system clipboard, converts it, and either inserts it at the active editor cursor or copies the React component back to your clipboard.

Extension Settings

Customize conversion behavior in your VS Code / Cursor settings (settings.json):