Skip to content

✨(icons) add workflow to extract figma svg to react components#164

Merged
NathanVss merged 7 commits intomainfrom
feat/figma-to-react-svg-components
Apr 2, 2026
Merged

✨(icons) add workflow to extract figma svg to react components#164
NathanVss merged 7 commits intomainfrom
feat/figma-to-react-svg-components

Conversation

@NathanVss
Copy link
Copy Markdown
Collaborator

@NathanVss NathanVss commented Feb 4, 2026 •
edited
Loading

By running

yarn generate-icons --token=figd_Jsq60VFxQKbXQaoLj8JjdTPFWY0Saj6WUkqBnSYf --file-key=hPwxE24MEaX3mBQ0KXNTSY --node-id=10599-4122

Via the Figma API the svg are download and transformed into React component via SVGR.

Capture d’écran 2026-02-04 à 15 50 57

Todo

  • It must work for re-sync
  • Make sure exports work fine
  • Handle icon size

@socket-security
Copy link
Copy Markdown

socket-security bot commented Feb 4, 2026

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Added@​svgr/​plugin-prettier@​8.1.01001006980100
Added@​svgr/​plugin-svgo@​8.1.01001007480100
Added@​svgr/​plugin-jsx@​8.1.01001009180100
Added@​svgr/​core@​8.1.01001008680100
Addedtsx@​4.21.01001008185100

View full report

@socket-security
Copy link
Copy Markdown

socket-security bot commented Feb 4, 2026

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm svgo is 91.0% likely obfuscated

Confidence: 0.91

Location: Package overview

From: ? → npm/@svgr/plugin-svgo@8.1.0 → npm/svgo@3.3.2

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/svgo@3.3.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

jbpenrath
jbpenrath approved these changes Mar 19, 2026
View reviewed changes
@jbpenrath
Copy link
Copy Markdown
Contributor

jbpenrath commented Mar 19, 2026

An overall comment, I'll complete the README.md about this icon generation logic.

@NathanVss NathanVss force-pushed the feat/figma-to-react-svg-components branch from 0f77c9c to 3b35921 Compare April 2, 2026 14:55
NathanVss added 5 commits April 2, 2026 17:00
@NathanVss
✨(icon) add Figma-to-React SVG icon generation script
bd5ec5e 
Add a script that fetches SVG icons from a Figma file,
transforms them into React components via SVGR, and
generates a barrel file. Also adds the required devDeps
(@svgr/*, tsx) and the generate-icons npm script.
@NathanVss
✨(icon) add IconSvg wrapper component
378cb38 
Provide a base SVG wrapper that handles size presets
and offers a consistent API for auto-generated and
custom SVG icons.
@NathanVss
✨(icon) add auto-generated SVG icon components
edf722a 
Product-specific icons exported from the Figma design
system and transformed into React components via the
generate-icons script.
@NathanVss
♻️(icon) reorganize stories and export SVG icons
852e3a2 
Split the single Icon story into Material and SVG
sub-pages for better discoverability. Add an MDX
doc page explaining both icon types and export the
new IconSvg component and generated icons.
@NathanVss
📝(doc) update changelog
d25aad4 
Add the entries related to the new svg icons generared.
@NathanVss NathanVss force-pushed the feat/figma-to-react-svg-components branch from 3b35921 to d25aad4 Compare April 2, 2026 15:03
@NathanVss NathanVss changed the title ✨(POC) add workflow to extract figma svg to react components ✨(icons) add workflow to extract figma svg to react components Apr 2, 2026
NathanVss added 2 commits April 2, 2026 17:08
@NathanVss
🐛(icon) fix lint error in IconSvg stories
fc3b7e3 
Extract the render function body into a proper
AllIcons component so that the useState hook is
called from a valid React component context.
@NathanVss
📦(icon) update yarn.lock with new devDependencies
7236363 
The lockfile was out of sync with package.json after
adding @svgr/* and tsx, causing CI to fail on
yarn install --frozen-lockfile.
@NathanVss NathanVss merged commit 7236363 into main Apr 2, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jbpenrath jbpenrath jbpenrath approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@NathanVss @jbpenrath