All Projects → SaraVieira → Svg To Jsx

SaraVieira / Svg To Jsx

Licence: mit
Figma plugin to copy svg as a react component

Labels

SVG to JSX Figma Plugin

Plugin UI

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].