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

* feat: add script to pull icons automatically from Figma

* chore: run script to update all icons from Figma source of truth

* feat: add GitHub action workflow file

* chore: update CONTRIBUTION readme for contributing icons

Author: matthewferry

.changeset/brave-signs-pump.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/icons": patch
+---
+
+feat: add script to sync icon package from Figma file and initial sync of icons

.github/workflows/sync-icons.yml

@@ -0,0 +1,96 @@
+name: Sync icons
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  sync-icons:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Tokens
+        uses: launchdarkly/gh-actions/actions/[email protected]
+        with:
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          ssm_parameter_pairs: |
+            /production/common/launchpad-ui/figma-file-key = FIGMA_FILE_KEY,
+            /production/common/launchpad-ui/figma-access-token = FIGMA_ACCESS_TOKEN
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Sync Icons
+        run: pnpm nx @launchpad-ui/icons:sync
+        env:
+          CI: true
+          NX_NO_DAEMON: true
+
+      - name: Connect Icons
+        run: pnpm nx @launchpad-ui/icons:connect
+        env:
+          CI: true
+          NX_NO_DAEMON: true
+
+      - name: Detect changes
+        id: changes
+        run: |
+          git status --short
+          if git diff --quiet && git diff --cached --quiet; then
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+            echo "No changes detected."
+          else
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+            echo "Changes detected."
+          fi
+
+      - name: Add changeset
+        if: steps.changes.outputs.changed == 'true'
+        run: npx changeset add --empty
+        env:
+          CI: true
+          NX_NO_DAEMON: true
+
+      - name: Create Pull Request
+        if: steps.changes.outputs.changed == 'true'
+        id: cpr
+        uses: peter-evans/create-pull-request@v6
+        with:
+          branch: ci/sync-icons
+          delete-branch: true
+          commit-message: "feat(icons): sync & connect icons"
+          title: "feat(icons): sync & connect icons"
+          body: |
+            Automated icon sync & connect run.
+            Commands executed:
+            - pnpm nx @launchpad-ui/icons:sync
+            - pnpm nx @launchpad-ui/icons:connect
+
+            Diff:
+            ${{ env.DIFF_BODY }}
+          labels: |
+            icons
+          assignees: ${{ github.actor }}
+
+      - name: No-op (no changes)
+        if: steps.changes.outputs.changed != 'true'
+        run: echo "No changes detected, skipping changeset and PR creation."

CONTRIBUTING.md

@@ -9,9 +9,13 @@ The following is a set of guidelines for contributing to LaunchPad and its packa
 - [How Can I Contribute?](#how-can-i-contribute)
 - [Code Contribution Guide](#code-contribution-guide)
 - [Common Tasks](#common-tasks)
+  - [Installation](#installation)
+  - [Storybook](#storybook)
+  - [Running Tests](#running-tests)
+  - [Adding Dependencies to Packages](#adding-dependencies-to-packages)
+  - [Adding Icons to LaunchPad](#adding-icons-to-launchpad)
 - [Styleguides](#styleguides)
 
----
 
 ## How Can I Contribute?
 
@@ -42,7 +46,6 @@ If you'd like to help by writing code and filing a pull request for a feature en
 
 To learn how to contribute code in LaunchPad, follow the guide below.
 
----
 
 ## Code Contribution Guide
 
@@ -136,13 +139,10 @@ $ pnpm chromatic --project-token PROJECT_TOKEN --branch-name FORKED_BRANCH --bui
 
 If you updated the `components`, `icons`, or `tokens` package your PR will be decorated with preview releases ([example](https://github.com/launchdarkly/launchpad-ui/pull/1686#issuecomment-2898653450)) which will allow you to install them to your project to test/verify. This is helpful for bug fixes or ensuring no regressions result from a refactoring and/or style changes.
 
----
 
 ## Common Tasks
 
-## Running LaunchPad locally
-
-### Installation
+### Local setup
 
 [pnpm](https://pnpm.io/) is the package manager used in this monorepo.
 
@@ -183,12 +183,19 @@ $ pnpm test
 
 ### Adding Icons to LaunchPad
 
-- Add the SVG body content into a new symbol entry with id `lp-icon-{name}` in the `/src/image/sprite.svg` file in the `@launchpad/icons` package.
-- Add its `id` (minus prefix `lp-icon`) to the icons array in `/src/types.ts`.
-- Run `pnpm storybook` and visit the `Components/Icons` page to ensure your icon was generated properly.
-- Run `pnpm nx run @launchpad-ui/icons:connect` (https://github.com/figma/code-connect/blob/main/cli/scripts/README.md) to update the icons Figma Code Connect file.
+_Do not add icons manually. LaunchPad icons are managed in Figma and synced to the `@launchpad-ui/icons` package via a script._
+
+To add a new icon to LaunchPad:
+
+- Create a branch in the LaunchPad Figma library and add your icon to the /Icons page.
+- Make sure your new icon is reviewed by design. You can always ping `@uxteam` in #ask-launchpad-design-system if you need help making your icon or to get a review.
+- Merge the icon to the LaunchPad Figma library
+- Run the `sync-icons` GitHub action. This action does the following:
+  - Runs `pnpm nx run @launchpad-ui/icons:sync` to build the icons from Figma
+  - Runs `pnpm nx run @launchpad-ui/icons:connect` to update the icons [Figma Code Connect](https://github.com/figma/code-connect/blob/main/cli/scripts/README.md) file.
+  - Opens a pull request for you
+- Open the `Components/Icons` page on the PR deployed Chromatic storybook to ensure your icon was generated properly.
 
----
 
 ## Styleguides