Skip to content

feat(icons): add script to automatically pull icons from Figma #1747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 15 commits into
base: main
Choose a base branch
from

Conversation

matthewferry
Copy link
Contributor

@matthewferry matthewferry commented Aug 21, 2025

Summary

Adds a script to pull icons from Figma. This will make it much easier for adding icons so devs just need to create a branch, run the script and open a PR. It does require that icons be merged into LaunchPad figma before being able to add them, but I think that's a constraint that feels more like a feature than a bug so our icons don't get out of sync. Also reduces the mistakes that are often added in icon PRs such as not putting symbols in alphabetical order or drift between figma component names and icon ids.

What it does:

  • grabs all icons from icons node in LaunchPad Figma file
  • checks for new/removed icons and logs the diff so you can see if an icon is being removed or which new one is being added
  • runs svg through svgo optimization
  • rewrites deterministically the svg sprite and types files solely on what is in Figma
image

How to use

  • create a PAT in figma
  • add the PAT to an .env file
  • run pnpm nx run @launchpad-ui/icons:sync

TODO/Questions:

  • Resolve differences between current Figma and Current code (see below for the diff)
  • Instead of having developers create PATs in figma and run this script locally, can we use Figma Webhook to run a GitHub action when the icon library is published?
  • cleanup the script

diff between current LP-ui and Figma icons:

  • [icons:diff] New icons added: arrow-merge-both, chart-bell-curve
  • [icons:diff] Icons no longer present in Figma and will be removed from code: arrow-merge, arrow-up-right, backslash, chart-bell, coins, json, map-check, osmo, rocket, sandbox, slash, stack, thumb-up, workflow

Copy link

changeset-bot bot commented Aug 21, 2025

🦋 Changeset detected

Latest commit: badb18e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
Name Type
@launchpad-ui/icons Patch
@launchpad-ui/button Patch
@launchpad-ui/components Patch
@launchpad-ui/drawer Patch
@launchpad-ui/dropdown Patch
@launchpad-ui/filter Patch
@launchpad-ui/form Patch
@launchpad-ui/menu Patch
@launchpad-ui/modal Patch
@launchpad-ui/navigation Patch
@launchpad-ui/core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@matthewferry matthewferry changed the title Mf/feat/icons automation feat(icons): add script to automatically pull icons from Figma Aug 21, 2025
'sidebar-left-collapse',
'sidebar-left-expand',
'sidebar-right-collapse',
'sidebar-right-expand',
'slash',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we lost this icon and it's used in breadcrumbs?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this one and a few others were never added to Figma. Going through and adding those back now

Copy link

pkg-pr-new bot commented Aug 21, 2025

yarn add https://pkg.pr.new/@launchpad-ui/components@1747.tgz
yarn add https://pkg.pr.new/@launchpad-ui/icons@1747.tgz
yarn add https://pkg.pr.new/@launchpad-ui/tokens@1747.tgz

commit: badb18e

Copy link
Contributor

github-actions bot commented Aug 21, 2025

Size Change: 0 B

Total Size: 530 kB

ℹ️ View Unchanged
Filename Size
apps/vscode/dist/client.js 111 kB
apps/vscode/dist/server.js 261 kB
packages/box/dist/index.es.js 7.26 kB
packages/box/dist/index.js 7.82 kB
packages/box/dist/style.css 2.67 kB
packages/button/dist/index.es.js 1.89 kB
packages/button/dist/index.js 2.32 kB
packages/button/dist/style.css 3 kB
packages/components/dist/index.es.js 19 kB
packages/components/dist/index.js 19.9 kB
packages/components/dist/style.css 8.36 kB
packages/core/dist/index.es.js 512 B
packages/core/dist/index.js 1.27 kB
packages/drawer/dist/index.es.js 1.76 kB
packages/drawer/dist/index.js 2.22 kB
packages/drawer/dist/style.css 497 B
packages/dropdown/dist/index.es.js 1.15 kB
packages/dropdown/dist/index.js 1.59 kB
packages/filter/dist/index.es.js 2.23 kB
packages/filter/dist/index.js 2.68 kB
packages/filter/dist/style.css 881 B
packages/focus-trap/dist/index.es.js 418 B
packages/focus-trap/dist/index.js 852 B
packages/form/dist/index.es.js 4.25 kB
packages/form/dist/index.js 4.73 kB
packages/form/dist/style.css 2.21 kB
packages/icons/dist/index.es.js 1.3 kB
packages/icons/dist/index.js 1.73 kB
packages/icons/dist/style.css 532 B
packages/menu/dist/index.es.js 3.69 kB
packages/menu/dist/index.js 4.16 kB
packages/menu/dist/style.css 872 B
packages/modal/dist/index.es.js 3.08 kB
packages/modal/dist/index.js 3.55 kB
packages/modal/dist/style.css 898 B
packages/navigation/dist/index.es.js 2.75 kB
packages/navigation/dist/index.js 3.21 kB
packages/navigation/dist/style.css 874 B
packages/overlay/dist/index.es.js 1.02 kB
packages/overlay/dist/index.js 1.42 kB
packages/popover/dist/index.es.js 3.01 kB
packages/popover/dist/index.js 3.43 kB
packages/popover/dist/style.css 529 B
packages/portal/dist/index.es.js 420 B
packages/portal/dist/index.js 835 B
packages/table/dist/index.es.js 1.01 kB
packages/table/dist/index.js 1.44 kB
packages/table/dist/style.css 700 B
packages/tokens/dist/fonts.css 183 B
packages/tokens/dist/index.css 1.47 kB
packages/tokens/dist/index.es.js 3.07 kB
packages/tokens/dist/index.js 3.11 kB
packages/tokens/dist/media-queries.css 113 B
packages/tokens/dist/themes.css 2.27 kB
packages/tooltip/dist/index.es.js 598 B
packages/tooltip/dist/index.js 1.02 kB
packages/tooltip/dist/style.css 337 B
packages/vars/dist/index.es.js 2.66 kB
packages/vars/dist/index.js 2.66 kB

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants