Back to Plugins

SVG to React / Native / SolidJS
A Figma plugin that lets you easily optimize and transform multiple SVG files into JSX components
optimizationreact nativesvgojavascripticonssvgtsxjsxreactexporttypescriptsolidcode-generators
Plugin Preview
About this plugin
SVG to React / Native / SolidJS
A Figma plugin that lets you easily optimize and transform multiple SVG files into JSX components.
Features
- Optimizes and transforms SVGs into framework-specific components for [React](https://react.dev/), [React Native](https://reactnative.dev/), and [SolidJS](https://www.solidjs.com/)
- Utilizes [SVGO](https://svgo.dev/) to optimize SVGs
- Formats code using [Prettier](https://prettier.io/)
- Allows batch transformation of multiple SVGs at once
- Provides various options for SVG transformation
Usage
- Select at least one node (any item that figma can export).
- Run the "SVG to React/Native/SolidJS" plugin.
- Open the tab for your desired framework (default: React).
- Adjust options to your preference.
- Save all SVGs as files" or open individual SVGs to copy/save.
Inspired by
Plugin Details
Version | 14 |
---|---|
Created | August 11, 2022 |
Last Updated | August 14, 2025 |
Category | Software development |
Creator | Maksymilian Kasperowicz |
Stats | 440 installs, 79 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui/index.html
- main:dist/plugin/index.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.