Icons: Redraw 65 icons to be stroke-based.#78812
Draft
jasmussen wants to merge 1 commit into
Draft
Conversation
|
Flaky tests detected in 42a077e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26637740767
|
Contributor
Author
|
For those following along, noting that this PR is not ready for review and is blocked on #78808 landing first so it can be rebased, due to some stroke-based issues uncovered in #78808 (comment) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Sibling PR to #78808, related to #78774. Redraws 65 more icons to be stroke-based, notably arrow/line-heavy utility icons.
With this PR, here's a visual map status update:
Teal shows icons in 78808, black shows icons updated in this PR.
It's easy to redraw these, by the way, and this GIF is included to show why in some cases the SVG output is cleaner, because instead of having 6 nodes in the chevron down, we now have 3:
Why?
As noted in 78808, the quality of the vectors is improved, it opens up future opportunities, and at present it allows icons to scale with an absolute stroke width, making it possible to mix icon sizes while maintaining a uniform look.
Testing Instructions
Run npm run storybook:dev, then go to Icons > Library. On this page, select 32 or 16px sizes and verify the below list of icons look good.
align-center, align-justify, align-left, align-none, align-right, arrow-down, arrow-down-left, arrow-down-right, arrow-left, arrow-right, arrow-up, arrow-up-left, arrow-up-right, block-meta, category, chart-bar, check, chevron-down, chevron-down-small, chevron-left, chevron-left-small, chevron-right, chevron-right-small, chevron-up, chevron-up-down, chevron-up-small, close, close-small, create, download, handle, home-button, justify-bottom, justify-center, justify-center-vertical, justify-left, justify-right, justify-space-between, justify-space-between-vertical, justify-stretch, justify-stretch-vertical, justify-top, line-dashed, line-dotted, line-solid, list-view, menu, next, plus, position-center, position-left, position-right, previous, pull-left, pull-right, pullquote, reset, resize-corner-ne, rss, search, separator, square, stretch-full-width, stretch-wide, upload
Note: as this batch of icons is rather large, it now includes icons that have high visibility in the block editor itself, which means it is both possible and useful to test these icons also by simply using the editor. You should see no visual changes to icons, such as those for alignments.
Similarly, this now also affects icons that are public, i.e. used in the Icon block. In doing this, I have already found one issue, which I will push a separate PR for, as it relates to CSS specificity and can be fixed separately:
Use of AI Tools
Just for todo-listing.