Awesome
SVG to JSX Figma Plugin
This plugins does what it says really, gets your SVG code in figma and gives you ready to use JSX you can copy and paste into your react apps and its written in ...🥁🥁 VUE 🥁🥁...
Remember kids, the framework wars are not good.
Features:
- JSX Export
- React Native export
- Typescript Export
- Icon Mode, where all the svg size gets replaced with "1em"
- Change the Icon name
How to run locally
You will need the figma desktop app you can download here.
Then clone the repo and run:
yarn && yarn start:ui
If you want top change the API you will need to run:
yarn && yarn start
Also uncomment this line and comment the one after it so it uses the dev server and not the deployed one.
Add it to figma by going to "Your Face > Plugins" and clicking on create a new plugin, this will give you the option to link to an existing plugin and you can select the manifest.json in this directory.
Open figma and right click a component and you can access the plugin in Plugins > Development > SVG to JSX.
When making changes go to Menu > Plugins > "Run Last Plugin" (Or hit ⌥⌘P for Mac or Ctrl+Alt+P for Windows).
Know errors while trying to run locally
LoadRunner.js throwing Error: error:0308010C:digital envelope routines::unsupported
If you get this error, you can solve it by enabling legacy OpenSSL provider.
On Unix-like (Linux, macOS, Git bash, etc.):
export NODE_OPTIONS=--openssl-legacy-provider
On Windows command prompt:
set NODE_OPTIONS=--openssl-legacy-provider
On PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"