Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realvjy/svg-to-code-figma
Generate SVG to Code (React) - Figma Plugin
https://github.com/realvjy/svg-to-code-figma
figma figma-dev-mode figma-plugin plugin
Last synced: 12 days ago
JSON representation
Generate SVG to Code (React) - Figma Plugin
- Host: GitHub
- URL: https://github.com/realvjy/svg-to-code-figma
- Owner: realvjy
- License: mit
- Created: 2024-03-03T16:20:39.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-19T13:51:22.000Z (8 months ago)
- Last Synced: 2024-08-21T13:16:07.307Z (3 months ago)
- Topics: figma, figma-dev-mode, figma-plugin, plugin
- Language: TypeScript
- Homepage: https://www.figma.com/community/plugin/1348045528828166727/svg-to-code-react-component
- Size: 1.16 MB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.figma.com/community/plugin/1348045528828166727/svg-to-code-react-component)
# Instant SVG to Code
This Figma (Dev) plugin allows you to generate react components from selected nodes instantly.
## How to use
1. Select elements you want to transform
2. Run "SVG to Code" plugin from Dev Mode
3. Copy/Save react components
4. Or check the thumbnail to use
---
## Figma Community
Grab community file from 👉 here [Figma Community](https://www.figma.com/community/plugin/1348045528828166727/svg-to-code-react-component)
## Local development
Plugin is opensource. You are welcome to contribute.
1. Clone the repository
```shell
git clone
cd svg-to-code-figma
```
1. Install the dependencies
```shell
yarn
```
1. Build the plugin
```
yarn watch
```
1. Open the [Figma desktop app](https://www.figma.com/downloads/)
1. Go to `Menu > Plugins > Development > Import Plugin from manifest...`
1. Choose `svg-to-code-figma/manifest.json`
1. Run the plugin by going to `Menu > Plugins > Development > SVG to Code`
## Support & Donate
[Github sponsor](https://github.com/sponsors/realvjy) | [Buy me a coffee](https://buymeacoffee.com/realvjy)
## Say hi or Feedback
Feel free to tag me or say hi on Twitter ([@realvjy](http://twitter.com/realvjy)). You are also welcome to share your feedback or bug reports 🙏