chore: Modify the icon optimization + component generation in a pipeline, instead of doing it every build

[alexasselin008]

At the moment, everytime we build, we do the following:

• Optimize all the icons and put them in the dist folder of the svg-icons package
• Re-optimize + generate icon components + generate index.ts + generate iconNames for the icons packages. (in the src/generated-icon-components folder
• Use tsup to transpile .ts files to .js and .d.ts

This results in longer average build steps for all PRs, even when unrelated to icon changes. And it will be increasingly longer the more icons we add to the package.

Following this PR, building the packages will only results:

• Copy the svgs from src/optimized-icons to /dist for the svg-icons package
• Use tsup to transpile .ts files to .js and .d.ts for the icons package (same thing we do for styled-system and components)

The process of adding / updating / removing an icon is detailed here:

Adding a new icon

1. Add SVGs to Size-Specific Folders

• Get the three versions (16px, 24px, 32px) of the SVG icon you want to add.
• Place each version in the following folders:
  • packages/svg-icons/src/icons/16px
  • packages/svg-icons/src/icons/24px
  • packages/svg-icons/src/icons/32px

2. Manual Generation (Optional)

• If you want to manually generate optimized SVGs and React components, run the following command:

pnpm generate-icons

• This command will optimize the SVGs and create React components in the respective folders.
• Commit the changes to the repository.

3. GitHub Action: Icon Generator (Automatic)

• If you prefer an automated process, simply commit the icons to the repository.
• The GitHub Action named "Icon Generator" will run automatically after the push.
• It will optimize the SVGs and generate React components in the respective folders and commit the code to your branch

4. Run Changeset Command

• After the GitHub Action has completed successfully or after manually generating the icons, run the following command to create release notes for @hopper-ui/svg-icons and @hopper-ui/icons:

pnpm changeset

• Follow the prompts to describe the changes made and choose the appropriate version bump.

Updating or removing an icon

• Updating or removing an icon is similar to adding a new icon. The only difference is that you will need to delete the SVGs from the following folders:

  • packages/svg-icons/src/icons/16px
  • packages/svg-icons/src/icons/24px
  • packages/svg-icons/src/icons/32px

• Steps 2-4 are the same as adding a new icon.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d8c28b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for wl-hopper ready!

Name	Link
🔨 Latest commit	10153d7
🔍 Latest deploy log	https://app.netlify.com/sites/wl-hopper/deploys/6570da17f6be720008cb5bac
😎 Deploy Preview	https://deploy-preview-105--wl-hopper.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.