Figma Icons to React Components
Does anyone have a 'goto' package or plugin to handle the integration of svg (icons) created in figma to a set of react components...
I really dont want to manually export and refactor all the svg -> jsx valid syntax etc everytime I want to update the figma stuff.
8 Replies
Just export as svg and make an svg file
Import the svg file
Done
I need control over styling, size, etc.
Ah
Throw it in a transformer š¤·
HTML to JSX
An online playground to convert HTML to JSX
I been using this https://svg2jsx.com/ I just really hate having to manually do this because im early in a design system and a lot could change in the future 100s of icons š„“
Editor - Convert SVG to valid JSX
Convert SVG to valid JSX
https://transform.tools/
as well for svg to components apparently
Transform
A polyglot web converter that's going to save you a lot of time.
Welp
idk lol
I don't think there's an automatic way
'Sad face' (time to waste my entire day off going down a figma plugin rabbit hole?)
š
For anyone in the future reading this: I decided to export all svgs from figma to desktop folder and then just build a simple script using https://github.com/balajmarius/svg2jsx/tree/master/packages/transform this and then adding my own custom config to use the svg file name input as the react component name.
For anyone who needs something similar https://github.com/JakeSchroeder/svg2jsx-cli