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
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).
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"