Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-03-05T16:24:15.000Z (4 months ago)
- Last Synced: 2024-05-02T04:47:38.774Z (2 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
Lists
- awesome-list - svg-to-jsx
- awesome-figma - svg-to-jsx - Figma plugin to copy svg as a react component. (Open-Source Plugins)
- awesome - svg-to-jsx - Figma plugin to copy svg as a react component (JavaScript)
- awesome-stars - svg-to-jsx
README
# SVG to JSX Figma Plugin
[](https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX)
[](https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX)
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