https://github.com/SaraVieira/svg-to-jsx

Figma plugin to copy svg as a react component
https://github.com/SaraVieira/svg-to-jsx

Last synced: about 2 months ago
JSON representation

Figma plugin to copy svg as a react component

• Host: GitHub
• URL: https://github.com/SaraVieira/svg-to-jsx
• Owner: SaraVieira
• License: mit
• Created: 2019-09-01T02:44:27.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-03-05T16:24:15.000Z (9 months ago)
• Last Synced: 2024-05-10T03:32:00.818Z (7 months ago)
• Language: HTML
• Homepage: https://www.figma.com/c/plugin/749818562498396194/SVG-to-JSX
• Size: 1.32 MB
• Stars: 197
• Watchers: 4
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome - svg-to-jsx - Figma plugin to copy svg as a react component (JavaScript)
• awesome-list - svg-to-jsx
• awesome-figma - svg-to-jsx - Figma plugin to copy svg as a react component. (Open-Source Plugins)

README

        
# SVG to JSX Figma Plugin

[![](https://img.shields.io/endpoint?url=https://figma-plugin-badges.vercel.app/api/installs/749818562498396194)](https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX)

[![](https://img.shields.io/endpoint?url=https://figma-plugin-badges.vercel.app/api/likes/749818562498396194)](https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX)

![Plugin UI](./ui.png)

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](https://www.figma.com/downloads/).

Then clone the repo and run:

```bash

yarn && yarn start:ui

```

If you want top change the API you will need to run:

```bash

yarn && yarn start

```

Also uncomment [this line](https://github.com/SaraVieira/svg-to-jsx/blob/05f9c645332f07b4e68129b8e42389abcd1a7345/src/ui.html#L127) 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.):

```bash

export NODE_OPTIONS=--openssl-legacy-provider

```

On Windows command prompt:

```cmd

set NODE_OPTIONS=--openssl-legacy-provider

```

On PowerShell:

```powershell

$env:NODE_OPTIONS = "--openssl-legacy-provider"

```

[Reference - Stackoverflow][1]

[1]: https://stackoverflow.com/a/69699772/8197137