SVG React Transform

A VSCode extension that transforms SVG files into React and React Native components with support for both JavaScript (.jsx) and TypeScript (.tsx) formats.

• Motivation
• Features
• How to Use
• Requirements
• Release Notes
• Demo

Demo

Motivation

Exporting SVG assets from Figma and manually converting them into React or React Native components is a time-consuming and error-prone process. This extension automates this workflow, allowing developers to focus on building their projects rather than dealing with manual conversions.

Features

• 🖱️ Right-click Context Menu: Transform SVG files directly from the Explorer context menu
• 🎯 Multiple Output Formats: Generate components in four different formats:
  • React Component (.tsx/.jsx) - TypeScript/JavaScript React component
  • React Native Component (.tsx/.jsx) - TypeScript/JavaScript React Native component
• 🎨 Interactive Selection: Choose your preferred output format through an intuitive menu
• 📁 Automatic File Creation: Generated components are saved alongside the original SVG file

How to Use

1. Right-click on any .svg file in the VSCode Explorer
2. Select "Transform to Component" from the context menu
3. Choose your desired output format from the menu:
   • React Component (.tsx/.jsx)
   • React Native Component (.tsx/.jsx)
4. The extension will generate the component file in the same directory as the original SVG

Requirements

• VSCode version 1.104.3 or higher

Release Notes

1.0.0

Initial release featuring:

• SVG to React/React Native component transformation
• Support for .jsx and .tsx output formats
• Context menu integration
• Interactive format selection