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

Update Source icon set #1562

Merged
merged 20 commits into from
Jul 11, 2024
Merged

Update Source icon set #1562

merged 20 commits into from
Jul 11, 2024

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Jun 18, 2024

What are you changing?

  • Updates Source's core icon set.
  • Adds icon gallery to Storybook docs.

Renamed icons

The following icons have been renamed:

Old name New name
SvgBookMark SvgBookmarkFilled
SvgBookMarkCross SvgBookmarkCross
SvgCrossRound SvgCrossRoundFilled
SvgHouse SvgHomeHouseFilled
SvgPersonRound SvgPersonRoundFilled
SvgShare SvgShareWeb

Deprecated icons

The following deprecated aliases have been removed:

Removed Aliased to
SvgOfflineCloud SvgCrossedOutCloud
SvgAlert SvgExclamation
SvgMessenger SvgFacebookMessenger
SvgInfo SvgInfoRound
SvgPlay SvgMediaControlsPlay
SvgPayPal SvgPayPalBrand

eg. if you are importing SvgOfflineCloud this is aliased to SvgCrossedOutCloud. The alias has now been removed so you should import SvgCrossedOutCloud directly.

The following icons have also been deprecated and will be removed in a future release:

❌ Don't use ✅ Use instead
SvgAlertTriangle SvgAlertRound
SvgFilter SvgFilterOutlinedWeb
SvgShareCallout SvgShareWeb

Why?

  • To maintain parity between code and design.

Images

All icons

Screenshot 2024-06-19 at 15 00 06

Icon gallery

Screenshot 2024-07-01 at 17 55 35

Copy link

changeset-bot bot commented Jun 18, 2024

🦋 Changeset detected

Latest commit: 7b159ce

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

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

Copy link
Contributor

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

@github-actions github-actions bot added the 📦 npm Affects a @guardian package on NPM label Jun 18, 2024
@jamesmockett jamesmockett linked an issue Jun 18, 2024 that may be closed by this pull request
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Jun 19, 2024
@jamesmockett jamesmockett added 🐥 Canaries Triggers canary releases of any packages with changesets waiting. and removed run_chromatic Runs chromatic when label is applied labels Jun 20, 2024
Copy link
Contributor

Copy link
Contributor

@jamesmockett jamesmockett added run_chromatic Runs chromatic when label is applied and removed 🐥 Canaries Triggers canary releases of any packages with changesets waiting. labels Jun 20, 2024
@jamesmockett jamesmockett marked this pull request as ready for review July 1, 2024 16:57
@jamesmockett jamesmockett requested review from a team as code owners July 1, 2024 16:57
Copy link
Member

@sndrs sndrs 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 will need changesets?

@jamesmockett
Copy link
Contributor Author

i think will need changesets?

Definitely. I thought I'd added one, but seems not 😞 (Or somehow didn't commit it.) Will add now…

@jamesmockett jamesmockett force-pushed the jm/update-icon-set branch 2 times, most recently from 909ba57 to 9aa5b85 Compare July 10, 2024 12:05
@jamesmockett jamesmockett requested review from a team as code owners July 10, 2024 12:05
@jamesmockett jamesmockett requested a review from a team as a code owner July 10, 2024 12:05
@jamesmockett jamesmockett requested a review from sndrs July 10, 2024 12:05
Storybook's built-in icon gallery has some formatting issues due to the
length of our icon names. Overlap occurs on wide screens, becoming worse
as viewport width shrinks. It also forces all icons to be the same size
so we cannot render them at one of our defined sizes, or render the wide
payment icons at their natural size. Building our own custom gallery and
styles allows us to work around these issues. By using the same names
and props we can potentially switch back to the Storybook version in the
future if these issues are resolved.
@jamesmockett jamesmockett merged commit d274436 into main Jul 11, 2024
19 checks passed
@jamesmockett jamesmockett deleted the jm/update-icon-set branch July 11, 2024 16:36
@jamesmockett
Copy link
Contributor Author

Usage of the renamed icons across projects looks like this:

Icon Instances
SvgBookMark 0
SvgBookMarkCross 0
SvgCrossRound 9
SvgHouse 0
SvgPersonRound 0
SvgShare 3

(Note: this ignores usage of the old @guardian/src-icons package and archived repos.)

Usage of the previously deprecated and now removed icons is as follows:

Icon Instances
SvgOfflineCloud 1
SvgAlert 0
SvgMessenger 1
SvgInfo 5
SvgPlay 0
SvgPayPal 1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 Design System 📦 npm Affects a @guardian package on NPM run_chromatic Runs chromatic when label is applied
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add new and updated icons to icon library
3 participants