Skip to content
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

feat(ui-icons): migrate icon compiler to distinct package #2343

Merged
merged 1 commit into from
Dec 11, 2023

Conversation

castastrophe
Copy link
Collaborator

@castastrophe castastrophe commented Dec 5, 2023

Description

Move SVG processing out of the CSS component package @spectrum-css/icon into a distinct package @spectrum-css/ui-icons.

Why?

Keeps tooling for SVG parsing separate from the tasks performed on CSS-only assets and allows consumers to pull in a focused package with the SVG assets they need for product.

How and where has this been tested?

Opened a PR against SWC with the necessary updates & tested this change using a yarn link to the new package.

Validation steps

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link
Contributor

github-actions bot commented Dec 5, 2023

File metrics

Summary

Total size: 4.03 MB*
Total change (Δ): ⬇ 36.83 KB (0.89%)

Package Size Δ
ui-icons - 🚨 package deleted/moved/renamed
Details

ui-icons

File Size Base Δ
Total 96.13 KB - ⬇ 96.13 KB (100.00%)
combined/Arrow100.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Arrow200.svg 0.50 KB - ⬇ 0.50 KB (100.00%)
combined/Arrow300.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Arrow400.svg 0.62 KB - ⬇ 0.62 KB (100.00%)
combined/Arrow500.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Arrow600.svg 0.53 KB - ⬇ 0.53 KB (100.00%)
combined/Arrow75.svg 0.48 KB - ⬇ 0.48 KB (100.00%)
combined/Asterisk100.svg 1.02 KB - ⬇ 1.02 KB (100.00%)
combined/Asterisk200.svg 1.04 KB - ⬇ 1.04 KB (100.00%)
combined/Asterisk300.svg 1.05 KB - ⬇ 1.05 KB (100.00%)
combined/Asterisk75.svg 1.01 KB - ⬇ 1.01 KB (100.00%)
combined/Checkmark100.svg 0.46 KB - ⬇ 0.46 KB (100.00%)
combined/Checkmark200.svg 0.50 KB - ⬇ 0.50 KB (100.00%)
combined/Checkmark300.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Checkmark400.svg 0.50 KB - ⬇ 0.50 KB (100.00%)
combined/Checkmark50.svg 0.49 KB - ⬇ 0.49 KB (100.00%)
combined/Checkmark500.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Checkmark600.svg 0.51 KB - ⬇ 0.51 KB (100.00%)
combined/Checkmark75.svg 0.47 KB - ⬇ 0.47 KB (100.00%)
combined/Chevron100.svg 0.47 KB - ⬇ 0.47 KB (100.00%)
combined/Chevron200.svg 0.45 KB - ⬇ 0.45 KB (100.00%)
combined/Chevron300.svg 0.49 KB - ⬇ 0.49 KB (100.00%)
combined/Chevron400.svg 0.47 KB - ⬇ 0.47 KB (100.00%)
combined/Chevron50.svg 0.49 KB - ⬇ 0.49 KB (100.00%)
combined/Chevron500.svg 0.46 KB - ⬇ 0.46 KB (100.00%)
combined/Chevron600.svg 0.48 KB - ⬇ 0.48 KB (100.00%)
combined/Chevron75.svg 0.45 KB - ⬇ 0.45 KB (100.00%)
combined/CornerTriangle100.svg 0.40 KB - ⬇ 0.40 KB (100.00%)
combined/CornerTriangle200.svg 0.41 KB - ⬇ 0.41 KB (100.00%)
combined/CornerTriangle300.svg 0.39 KB - ⬇ 0.39 KB (100.00%)
combined/CornerTriangle75.svg 0.39 KB - ⬇ 0.39 KB (100.00%)
combined/Cross100.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
combined/Cross200.svg 0.52 KB - ⬇ 0.52 KB (100.00%)
combined/Cross300.svg 0.55 KB - ⬇ 0.55 KB (100.00%)
combined/Cross400.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
combined/Cross500.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
combined/Cross600.svg 0.56 KB - ⬇ 0.56 KB (100.00%)
combined/Cross75.svg 0.50 KB - ⬇ 0.50 KB (100.00%)
combined/Dash100.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
combined/Dash200.svg 0.31 KB - ⬇ 0.31 KB (100.00%)
combined/Dash300.svg 0.30 KB - ⬇ 0.30 KB (100.00%)
combined/Dash400.svg 0.30 KB - ⬇ 0.30 KB (100.00%)
combined/Dash50.svg 0.30 KB - ⬇ 0.30 KB (100.00%)
combined/Dash500.svg 0.31 KB - ⬇ 0.31 KB (100.00%)
combined/Dash600.svg 0.31 KB - ⬇ 0.31 KB (100.00%)
combined/Dash75.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
combined/DoubleGripper.svg 0.43 KB - ⬇ 0.43 KB (100.00%)
combined/SingleGripper.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
combined/TripleGripper.svg 0.59 KB - ⬇ 0.59 KB (100.00%)
large/Arrow100.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
large/Arrow200.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Arrow300.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
large/Arrow400.svg 0.38 KB - ⬇ 0.38 KB (100.00%)
large/Arrow500.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
large/Arrow600.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
large/Arrow75.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Asterisk100.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
large/Asterisk200.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
large/Asterisk300.svg 0.55 KB - ⬇ 0.55 KB (100.00%)
large/Asterisk75.svg 0.53 KB - ⬇ 0.53 KB (100.00%)
large/Checkmark100.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Checkmark200.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark300.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark400.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark50.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark500.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark600.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Checkmark75.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
large/Chevron100.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron200.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron300.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron400.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron50.svg 0.22 KB - ⬇ 0.22 KB (100.00%)
large/Chevron500.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron600.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
large/Chevron75.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
large/CornerTriangle100.svg 0.21 KB - ⬇ 0.21 KB (100.00%)
large/CornerTriangle200.svg 0.20 KB - ⬇ 0.20 KB (100.00%)
large/CornerTriangle300.svg 0.18 KB - ⬇ 0.18 KB (100.00%)
large/CornerTriangle75.svg 0.19 KB - ⬇ 0.19 KB (100.00%)
large/Cross100.svg 0.28 KB - ⬇ 0.28 KB (100.00%)
large/Cross200.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
large/Cross300.svg 0.29 KB - ⬇ 0.29 KB (100.00%)
large/Cross400.svg 0.28 KB - ⬇ 0.28 KB (100.00%)
large/Cross500.svg 0.28 KB - ⬇ 0.28 KB (100.00%)
large/Cross600.svg 0.28 KB - ⬇ 0.28 KB (100.00%)
large/Cross75.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
large/Dash100.svg 0.15 KB - ⬇ 0.15 KB (100.00%)
large/Dash200.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash300.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash400.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash50.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash500.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash600.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
large/Dash75.svg 0.14 KB - ⬇ 0.14 KB (100.00%)
large/DoubleGripper.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
large/SingleGripper.svg 0.15 KB - ⬇ 0.15 KB (100.00%)
large/TripleGripper.svg 0.34 KB - ⬇ 0.34 KB (100.00%)
medium/Arrow100.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Arrow200.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Arrow300.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Arrow400.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Arrow500.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Arrow600.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
medium/Arrow75.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
medium/Asterisk100.svg 0.50 KB - ⬇ 0.50 KB (100.00%)
medium/Asterisk200.svg 0.53 KB - ⬇ 0.53 KB (100.00%)
medium/Asterisk300.svg 0.54 KB - ⬇ 0.54 KB (100.00%)
medium/Asterisk75.svg 0.52 KB - ⬇ 0.52 KB (100.00%)
medium/Checkmark100.svg 0.22 KB - ⬇ 0.22 KB (100.00%)
medium/Checkmark200.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Checkmark300.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Checkmark400.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Checkmark50.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
medium/Checkmark500.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Checkmark600.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Checkmark75.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
medium/Chevron100.svg 0.23 KB - ⬇ 0.23 KB (100.00%)
medium/Chevron200.svg 0.21 KB - ⬇ 0.21 KB (100.00%)
medium/Chevron300.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Chevron400.svg 0.23 KB - ⬇ 0.23 KB (100.00%)
medium/Chevron50.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
medium/Chevron500.svg 0.22 KB - ⬇ 0.22 KB (100.00%)
medium/Chevron600.svg 0.24 KB - ⬇ 0.24 KB (100.00%)
medium/Chevron75.svg 0.22 KB - ⬇ 0.22 KB (100.00%)
medium/CornerTriangle100.svg 0.19 KB - ⬇ 0.19 KB (100.00%)
medium/CornerTriangle200.svg 0.20 KB - ⬇ 0.20 KB (100.00%)
medium/CornerTriangle300.svg 0.20 KB - ⬇ 0.20 KB (100.00%)
medium/CornerTriangle75.svg 0.20 KB - ⬇ 0.20 KB (100.00%)
medium/Cross100.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Cross200.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Cross300.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Cross400.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
medium/Cross500.svg 0.27 KB - ⬇ 0.27 KB (100.00%)
medium/Cross600.svg 0.29 KB - ⬇ 0.29 KB (100.00%)
medium/Cross75.svg 0.25 KB - ⬇ 0.25 KB (100.00%)
medium/Dash100.svg 0.12 KB - ⬇ 0.12 KB (100.00%)
medium/Dash200.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
medium/Dash300.svg 0.15 KB - ⬇ 0.15 KB (100.00%)
medium/Dash400.svg 0.15 KB - ⬇ 0.15 KB (100.00%)
medium/Dash50.svg 0.15 KB - ⬇ 0.15 KB (100.00%)
medium/Dash500.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
medium/Dash600.svg 0.16 KB - ⬇ 0.16 KB (100.00%)
medium/Dash75.svg 0.14 KB - ⬇ 0.14 KB (100.00%)
medium/DoubleGripper.svg 0.20 KB - ⬇ 0.20 KB (100.00%)
medium/SingleGripper.svg 0.12 KB - ⬇ 0.12 KB (100.00%)
medium/TripleGripper.svg 0.26 KB - ⬇ 0.26 KB (100.00%)
spectrum-css-icons-large.svg 12.27 KB - ⬇ 12.27 KB (100.00%)
spectrum-css-icons-medium.svg 11.57 KB - ⬇ 11.57 KB (100.00%)
spectrum-css-icons.svg 23.93 KB - ⬇ 23.93 KB (100.00%)

* An ASCII character in UTF-8 is 8 bits or 1 byte.

@castastrophe castastrophe added the wip This is a work in progress, don't judge. label Dec 6, 2023
@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch from 38fda1c to 995bb3b Compare December 6, 2023 18:33
Copy link
Contributor

github-actions bot commented Dec 6, 2023

🚀 Deployed on https://pr-2343--spectrum-css.netlify.app

@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch from 995bb3b to 568883c Compare December 6, 2023 18:43
@castastrophe castastrophe marked this pull request as ready for review December 6, 2023 18:56
@castastrophe castastrophe marked this pull request as draft December 6, 2023 18:56
@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch 2 times, most recently from c9944f0 to 776c5d5 Compare December 6, 2023 19:38
@castastrophe castastrophe marked this pull request as ready for review December 6, 2023 19:41
@castastrophe castastrophe added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. build Issues associated with the build process; often a refactor ready-for-review and removed wip This is a work in progress, don't judge. labels Dec 6, 2023
@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch 4 times, most recently from 358d92c to b18bbce Compare December 6, 2023 20:21
@castastrophe castastrophe requested a review from pfulton December 6, 2023 20:22
ui-icons/package.json Outdated Show resolved Hide resolved
Copy link
Collaborator

@mdt2 mdt2 left a comment

Choose a reason for hiding this comment

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

I think this looks good. I looked through the code and checked a few components in the docs site and in Storybook and all the icons are matching prod. Should we run VRTs before merging?

@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch 7 times, most recently from 533c41d to 24b0db2 Compare December 8, 2023 15:56
@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch 2 times, most recently from f1d6019 to 5df7824 Compare December 8, 2023 18:21
Copy link
Collaborator

@pfulton pfulton left a comment

Choose a reason for hiding this comment

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

Just one thing here about the version number, @castastrophe

@@ -0,0 +1,28 @@
{
"name": "@spectrum-css/ui-icons",
"version": "0.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should we just make this 1.0.0?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I did this because during the release it will bump it and I thought this would make it easier to target the 1.0 release we want. I'll change it during the release process if it doesn't bump correctly.

BREAKING CHANGE:
 - icon will no longer contain SVG assets
@castastrophe castastrophe force-pushed the feat-ui-icons-migration branch from 5df7824 to c07e9e2 Compare December 11, 2023 16:24
@castastrophe castastrophe enabled auto-merge (squash) December 11, 2023 16:27
@castastrophe castastrophe merged commit d73d594 into main Dec 11, 2023
11 of 17 checks passed
@castastrophe castastrophe deleted the feat-ui-icons-migration branch December 11, 2023 16:45
This was referenced Apr 26, 2024
@github-actions github-actions bot mentioned this pull request May 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build Issues associated with the build process; often a refactor ready-to-merge size-3 M ~18-30hrs; moderate effort or complexity, several work days needed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants