svg-code generator for React and React Native

About this plugin

Instantly convert your Figma designs into production-ready code

This plugin streamlines the handoff process by generating clean, optimized React and React Native components directly from your selected Figma frames. Designed specifically for Dev Mode, it handles the tedious work of syntax conversion so you can focus on building.

Features

1. ⚛️ React Components: Generates functional components with automatic prop spreading (`{...props}`), making your icons and illustrations immediately reusable.
2. 📱 React Native Support: Automatically converts SVGs to `react-native-svg` components, handling all necessary imports and tag replacements (`<Svg>`, `<Path>`, etc.).
3. Transforms `class` to `className`.
4. Parses inline `style` strings into React style objects.
5. ⚡️ Dev Mode Integration: Works seamlessly within the Inspect panel. Just select a layer and grab the code.
6. 🎯 Multiple Formats: Switch instantly between React, React Native, and raw SVG output using the dropdown menu.