Adding color filled icon

[matiasbenedetto]

What?

Adds a filled version of the 'color' icon, 'colorFilled'.

Why?

To be able to implement the UI proposed in https://github.com/WordPress/gutenberg/issues/66465#issuecomment-2439960078 for https://github.com/WordPress/gutenberg/issues/66465

How?

Adds a new icon to the icons library. This is a slightly modified version of the SVG code proposed by @aaronrobertshaw in https://github.com/WordPress/gutenberg/pull/67140#pullrequestreview-2447221592 props to him. I removed some unwanted or hardcore properties to make the SVG code looks like the rest of the filled icons in the package.

Testing Instructions

Import the 'colorFilled' from the @wordpress/icons package and observe how it looks. Try to set a fill color and a stroke color too.

Screenshots or screencast

Default:

With custom fill color set:

With custom fill and stroke color set:

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions[bot]]

Size Change: 0 B

Total Size: 1.82 MB

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `build-module/a11y/index.min.js` | 482 B | | `build-module/block-library/file/view.min.js` | 447 B | | `build-module/block-library/image/view.min.js` | 1.78 kB | | `build-module/block-library/navigation/view.min.js` | 1.16 kB | | `build-module/block-library/query/view.min.js` | 742 B | | `build-module/block-library/search/view.min.js` | 616 B | | `build-module/interactivity-router/index.min.js` | 3.03 kB | | `build-module/interactivity/debug.min.js` | 17.2 kB | | `build-module/interactivity/index.min.js` | 13.6 kB | | `build/a11y/index.min.js` | 952 B | | `build/annotations/index.min.js` | 2.26 kB | | `build/api-fetch/index.min.js` | 2.32 kB | | `build/autop/index.min.js` | 2.12 kB | | `build/blob/index.min.js` | 579 B | | `build/block-directory/index.min.js` | 7.26 kB | | `build/block-directory/style-rtl.css` | 1 kB | | `build/block-directory/style.css` | 1 kB | | `build/block-editor/content-rtl.css` | 4.42 kB | | `build/block-editor/content.css` | 4.41 kB | | `build/block-editor/default-editor-styles-rtl.css` | 394 B | | `build/block-editor/default-editor-styles.css` | 394 B | | `build/block-editor/index.min.js` | 255 kB | | `build/block-editor/style-rtl.css` | 15.4 kB | | `build/block-editor/style.css` | 15.4 kB | | `build/block-library/blocks/archives/editor-rtl.css` | 84 B | | `build/block-library/blocks/archives/editor.css` | 83 B | | `build/block-library/blocks/archives/style-rtl.css` | 90 B | | `build/block-library/blocks/archives/style.css` | 90 B | | `build/block-library/blocks/audio/editor-rtl.css` | 149 B | | `build/block-library/blocks/audio/editor.css` | 151 B | | `build/block-library/blocks/audio/style-rtl.css` | 132 B | | `build/block-library/blocks/audio/style.css` | 132 B | | `build/block-library/blocks/audio/theme-rtl.css` | 134 B | | `build/block-library/blocks/audio/theme.css` | 134 B | | `build/block-library/blocks/avatar/editor-rtl.css` | 115 B | | `build/block-library/blocks/avatar/editor.css` | 115 B | | `build/block-library/blocks/avatar/style-rtl.css` | 104 B | | `build/block-library/blocks/avatar/style.css` | 104 B | | `build/block-library/blocks/button/editor-rtl.css` | 265 B | | `build/block-library/blocks/button/editor.css` | 265 B | | `build/block-library/blocks/button/style-rtl.css` | 555 B | | `build/block-library/blocks/button/style.css` | 555 B | | `build/block-library/blocks/buttons/editor-rtl.css` | 291 B | | `build/block-library/blocks/buttons/editor.css` | 291 B | | `build/block-library/blocks/buttons/style-rtl.css` | 345 B | | `build/block-library/blocks/buttons/style.css` | 345 B | | `build/block-library/blocks/calendar/style-rtl.css` | 240 B | | `build/block-library/blocks/calendar/style.css` | 240 B | | `build/block-library/blocks/categories/editor-rtl.css` | 132 B | | `build/block-library/blocks/categories/editor.css` | 131 B | | `build/block-library/blocks/categories/style-rtl.css` | 152 B | | `build/block-library/blocks/categories/style.css` | 152 B | | `build/block-library/blocks/code/editor-rtl.css` | 53 B | | `build/block-library/blocks/code/editor.css` | 53 B | | `build/block-library/blocks/code/style-rtl.css` | 139 B | | `build/block-library/blocks/code/style.css` | 139 B | | `build/block-library/blocks/code/theme-rtl.css` | 122 B | | `build/block-library/blocks/code/theme.css` | 122 B | | `build/block-library/blocks/columns/editor-rtl.css` | 108 B | | `build/block-library/blocks/columns/editor.css` | 108 B | | `build/block-library/blocks/columns/style-rtl.css` | 420 B | | `build/block-library/blocks/columns/style.css` | 420 B | | `build/block-library/blocks/comment-author-avatar/editor-rtl.css` | 124 B | | `build/block-library/blocks/comment-author-avatar/editor.css` | 124 B | | `build/block-library/blocks/comment-author-name/style-rtl.css` | 72 B | | `build/block-library/blocks/comment-author-name/style.css` | 72 B | | `build/block-library/blocks/comment-content/style-rtl.css` | 120 B | | `build/block-library/blocks/comment-content/style.css` | 120 B | | `build/block-library/blocks/comment-date/style-rtl.css` | 65 B | | `build/block-library/blocks/comment-date/style.css` | 65 B | | `build/block-library/blocks/comment-edit-link/style-rtl.css` | 70 B | | `build/block-library/blocks/comment-edit-link/style.css` | 70 B | | `build/block-library/blocks/comment-reply-link/style-rtl.css` | 71 B | | `build/block-library/blocks/comment-reply-link/style.css` | 71 B | | `build/block-library/blocks/comment-template/style-rtl.css` | 200 B | | `build/block-library/blocks/comment-template/style.css` | 199 B | | `build/block-library/blocks/comments-pagination-numbers/editor-rtl.css` | 122 B | | `build/block-library/blocks/comments-pagination-numbers/editor.css` | 121 B | | `build/block-library/blocks/comments-pagination/editor-rtl.css` | 228 B | | `build/block-library/blocks/comments-pagination/editor.css` | 217 B | | `build/block-library/blocks/comments-pagination/style-rtl.css` | 234 B | | `build/block-library/blocks/comments-pagination/style.css` | 231 B | | `build/block-library/blocks/comments-title/editor-rtl.css` | 75 B | | `build/block-library/blocks/comments-title/editor.css` | 75 B | | `build/block-library/blocks/comments/editor-rtl.css` | 837 B | | `build/block-library/blocks/comments/editor.css` | 836 B | | `build/block-library/blocks/comments/style-rtl.css` | 637 B | | `build/block-library/blocks/comments/style.css` | 637 B | | `build/block-library/blocks/cover/editor-rtl.css` | 631 B | | `build/block-library/blocks/cover/editor.css` | 631 B | | `build/block-library/blocks/cover/style-rtl.css` | 1.7 kB | | `build/block-library/blocks/cover/style.css` | 1.69 kB | | `build/block-library/blocks/details/editor-rtl.css` | 65 B | | `build/block-library/blocks/details/editor.css` | 65 B | | `build/block-library/blocks/details/style-rtl.css` | 86 B | | `build/block-library/blocks/details/style.css` | 86 B | | `build/block-library/blocks/embed/editor-rtl.css` | 331 B | | `build/block-library/blocks/embed/editor.css` | 331 B | | `build/block-library/blocks/embed/style-rtl.css` | 419 B | | `build/block-library/blocks/embed/style.css` | 419 B | | `build/block-library/blocks/embed/theme-rtl.css` | 133 B | | `build/block-library/blocks/embed/theme.css` | 133 B | | `build/block-library/blocks/file/editor-rtl.css` | 326 B | | `build/block-library/blocks/file/editor.css` | 326 B | | `build/block-library/blocks/file/style-rtl.css` | 278 B | | `build/block-library/blocks/file/style.css` | 279 B | | `build/block-library/blocks/footnotes/style-rtl.css` | 198 B | | `build/block-library/blocks/footnotes/style.css` | 197 B | | `build/block-library/blocks/form-input/editor-rtl.css` | 229 B | | `build/block-library/blocks/form-input/editor.css` | 229 B | | `build/block-library/blocks/form-input/style-rtl.css` | 357 B | | `build/block-library/blocks/form-input/style.css` | 357 B | | `build/block-library/blocks/form-submission-notification/editor-rtl.css` | 344 B | | `build/block-library/blocks/form-submission-notification/editor.css` | 341 B | | `build/block-library/blocks/form-submit-button/style-rtl.css` | 69 B | | `build/block-library/blocks/form-submit-button/style.css` | 69 B | | `build/block-library/blocks/form/view.min.js` | 470 B | | `build/block-library/blocks/freeform/editor-rtl.css` | 2.6 kB | | `build/block-library/blocks/freeform/editor.css` | 2.6 kB | | `build/block-library/blocks/gallery/editor-rtl.css` | 946 B | | `build/block-library/blocks/gallery/editor.css` | 951 B | | `build/block-library/blocks/gallery/style-rtl.css` | 1.83 kB | | `build/block-library/blocks/gallery/style.css` | 1.82 kB | | `build/block-library/blocks/gallery/theme-rtl.css` | 108 B | | `build/block-library/blocks/gallery/theme.css` | 108 B | | `build/block-library/blocks/group/editor-rtl.css` | 334 B | | `build/block-library/blocks/group/editor.css` | 334 B | | `build/block-library/blocks/group/style-rtl.css` | 103 B | | `build/block-library/blocks/group/style.css` | 103 B | | `build/block-library/blocks/group/theme-rtl.css` | 79 B | | `build/block-library/blocks/group/theme.css` | 79 B | | `build/block-library/blocks/heading/style-rtl.css` | 188 B | | `build/block-library/blocks/heading/style.css` | 188 B | | `build/block-library/blocks/html/editor-rtl.css` | 346 B | | `build/block-library/blocks/html/editor.css` | 347 B | | `build/block-library/blocks/image/editor-rtl.css` | 799 B | | `build/block-library/blocks/image/editor.css` | 799 B | | `build/block-library/blocks/image/style-rtl.css` | 1.59 kB | | `build/block-library/blocks/image/style.css` | 1.59 kB | | `build/block-library/blocks/image/theme-rtl.css` | 137 B | | `build/block-library/blocks/image/theme.css` | 137 B | | `build/block-library/blocks/latest-comments/style-rtl.css` | 355 B | | `build/block-library/blocks/latest-comments/style.css` | 354 B | | `build/block-library/blocks/latest-posts/editor-rtl.css` | 139 B | | `build/block-library/blocks/latest-posts/editor.css` | 138 B | | `build/block-library/blocks/latest-posts/style-rtl.css` | 509 B | | `build/block-library/blocks/latest-posts/style.css` | 510 B | | `build/block-library/blocks/list/style-rtl.css` | 107 B | | `build/block-library/blocks/list/style.css` | 107 B | | `build/block-library/blocks/loginout/style-rtl.css` | 61 B | | `build/block-library/blocks/loginout/style.css` | 61 B | | `build/block-library/blocks/media-text/editor-rtl.css` | 321 B | | `build/block-library/blocks/media-text/editor.css` | 320 B | | `build/block-library/blocks/media-text/style-rtl.css` | 552 B | | `build/block-library/blocks/media-text/style.css` | 550 B | | `build/block-library/blocks/more/editor-rtl.css` | 427 B | | `build/block-library/blocks/more/editor.css` | 427 B | | `build/block-library/blocks/navigation-link/editor-rtl.css` | 644 B | | `build/block-library/blocks/navigation-link/editor.css` | 645 B | | `build/block-library/blocks/navigation-link/style-rtl.css` | 192 B | | `build/block-library/blocks/navigation-link/style.css` | 191 B | | `build/block-library/blocks/navigation-submenu/editor-rtl.css` | 295 B | | `build/block-library/blocks/navigation-submenu/editor.css` | 294 B | | `build/block-library/blocks/navigation/editor-rtl.css` | 2.2 kB | | `build/block-library/blocks/navigation/editor.css` | 2.2 kB | | `build/block-library/blocks/navigation/style-rtl.css` | 2.25 kB | | `build/block-library/blocks/navigation/style.css` | 2.23 kB | | `build/block-library/blocks/nextpage/editor-rtl.css` | 392 B | | `build/block-library/blocks/nextpage/editor.css` | 392 B | | `build/block-library/blocks/page-list/editor-rtl.css` | 378 B | | `build/block-library/blocks/page-list/editor.css` | 378 B | | `build/block-library/blocks/page-list/style-rtl.css` | 192 B | | `build/block-library/blocks/page-list/style.css` | 192 B | | `build/block-library/blocks/paragraph/editor-rtl.css` | 236 B | | `build/block-library/blocks/paragraph/editor.css` | 236 B | | `build/block-library/blocks/paragraph/style-rtl.css` | 341 B | | `build/block-library/blocks/paragraph/style.css` | 340 B | | `build/block-library/blocks/post-author-biography/style-rtl.css` | 74 B | | `build/block-library/blocks/post-author-biography/style.css` | 74 B | | `build/block-library/blocks/post-author-name/style-rtl.css` | 69 B | | `build/block-library/blocks/post-author-name/style.css` | 69 B | | `build/block-library/blocks/post-author/editor-rtl.css` | 107 B | | `build/block-library/blocks/post-author/editor.css` | 107 B | | `build/block-library/blocks/post-author/style-rtl.css` | 188 B | | `build/block-library/blocks/post-author/style.css` | 189 B | | `build/block-library/blocks/post-comments-form/editor-rtl.css` | 96 B | | `build/block-library/blocks/post-comments-form/editor.css` | 96 B | | `build/block-library/blocks/post-comments-form/style-rtl.css` | 527 B | | `build/block-library/blocks/post-comments-form/style.css` | 528 B | | `build/block-library/blocks/post-content/style-rtl.css` | 61 B | | `build/block-library/blocks/post-content/style.css` | 61 B | | `build/block-library/blocks/post-date/style-rtl.css` | 62 B | | `build/block-library/blocks/post-date/style.css` | 62 B | | `build/block-library/blocks/post-excerpt/editor-rtl.css` | 71 B | | `build/block-library/blocks/post-excerpt/editor.css` | 71 B | | `build/block-library/blocks/post-excerpt/style-rtl.css` | 155 B | | `build/block-library/blocks/post-excerpt/style.css` | 155 B | | `build/block-library/blocks/post-featured-image/editor-rtl.css` | 729 B | | `build/block-library/blocks/post-featured-image/editor.css` | 726 B | | `build/block-library/blocks/post-featured-image/style-rtl.css` | 347 B | | `build/block-library/blocks/post-featured-image/style.css` | 347 B | | `build/block-library/blocks/post-navigation-link/style-rtl.css` | 215 B | | `build/block-library/blocks/post-navigation-link/style.css` | 214 B | | `build/block-library/blocks/post-template/editor-rtl.css` | 99 B | | `build/block-library/blocks/post-template/editor.css` | 98 B | | `build/block-library/blocks/post-template/style-rtl.css` | 399 B | | `build/block-library/blocks/post-template/style.css` | 398 B | | `build/block-library/blocks/post-terms/style-rtl.css` | 96 B | | `build/block-library/blocks/post-terms/style.css` | 96 B | | `build/block-library/blocks/post-time-to-read/style-rtl.css` | 70 B | | `build/block-library/blocks/post-time-to-read/style.css` | 70 B | | `build/block-library/blocks/post-title/style-rtl.css` | 162 B | | `build/block-library/blocks/post-title/style.css` | 162 B | | `build/block-library/blocks/preformatted/style-rtl.css` | 125 B | | `build/block-library/blocks/preformatted/style.css` | 125 B | | `build/block-library/blocks/pullquote/editor-rtl.css` | 134 B | | `build/block-library/blocks/pullquote/editor.css` | 134 B | | `build/block-library/blocks/pullquote/style-rtl.css` | 342 B | | `build/block-library/blocks/pullquote/style.css` | 342 B | | `build/block-library/blocks/pullquote/theme-rtl.css` | 167 B | | `build/block-library/blocks/pullquote/theme.css` | 167 B | | `build/block-library/blocks/query-pagination-numbers/editor-rtl.css` | 121 B | | `build/block-library/blocks/query-pagination-numbers/editor.css` | 118 B | | `build/block-library/blocks/query-pagination/editor-rtl.css` | 154 B | | `build/block-library/blocks/query-pagination/editor.css` | 154 B | | `build/block-library/blocks/query-pagination/style-rtl.css` | 237 B | | `build/block-library/blocks/query-pagination/style.css` | 237 B | | `build/block-library/blocks/query-title/style-rtl.css` | 64 B | | `build/block-library/blocks/query-title/style.css` | 64 B | | `build/block-library/blocks/query/editor-rtl.css` | 452 B | | `build/block-library/blocks/query/editor.css` | 451 B | | `build/block-library/blocks/quote/style-rtl.css` | 238 B | | `build/block-library/blocks/quote/style.css` | 238 B | | `build/block-library/blocks/quote/theme-rtl.css` | 233 B | | `build/block-library/blocks/quote/theme.css` | 236 B | | `build/block-library/blocks/read-more/style-rtl.css` | 138 B | | `build/block-library/blocks/read-more/style.css` | 138 B | | `build/block-library/blocks/rss/editor-rtl.css` | 101 B | | `build/block-library/blocks/rss/editor.css` | 101 B | | `build/block-library/blocks/rss/style-rtl.css` | 288 B | | `build/block-library/blocks/rss/style.css` | 287 B | | `build/block-library/blocks/search/editor-rtl.css` | 199 B | | `build/block-library/blocks/search/editor.css` | 199 B | | `build/block-library/blocks/search/style-rtl.css` | 672 B | | `build/block-library/blocks/search/style.css` | 671 B | | `build/block-library/blocks/search/theme-rtl.css` | 113 B | | `build/block-library/blocks/search/theme.css` | 113 B | | `build/block-library/blocks/separator/editor-rtl.css` | 100 B | | `build/block-library/blocks/separator/editor.css` | 100 B | | `build/block-library/blocks/separator/style-rtl.css` | 248 B | | `build/block-library/blocks/separator/style.css` | 248 B | | `build/block-library/blocks/separator/theme-rtl.css` | 195 B | | `build/block-library/blocks/separator/theme.css` | 195 B | | `build/block-library/blocks/shortcode/editor-rtl.css` | 286 B | | `build/block-library/blocks/shortcode/editor.css` | 286 B | | `build/block-library/blocks/site-logo/editor-rtl.css` | 806 B | | `build/block-library/blocks/site-logo/editor.css` | 803 B | | `build/block-library/blocks/site-logo/style-rtl.css` | 218 B | | `build/block-library/blocks/site-logo/style.css` | 218 B | | `build/block-library/blocks/site-tagline/editor-rtl.css` | 87 B | | `build/block-library/blocks/site-tagline/editor.css` | 87 B | | `build/block-library/blocks/site-tagline/style-rtl.css` | 65 B | | `build/block-library/blocks/site-tagline/style.css` | 65 B | | `build/block-library/blocks/site-title/editor-rtl.css` | 85 B | | `build/block-library/blocks/site-title/editor.css` | 85 B | | `build/block-library/blocks/site-title/style-rtl.css` | 143 B | | `build/block-library/blocks/site-title/style.css` | 143 B | | `build/block-library/blocks/social-link/editor-rtl.css` | 273 B | | `build/block-library/blocks/social-link/editor.css` | 273 B | | `build/block-library/blocks/social-links/editor-rtl.css` | 729 B | | `build/block-library/blocks/social-links/editor.css` | 727 B | | `build/block-library/blocks/social-links/style-rtl.css` | 1.51 kB | | `build/block-library/blocks/social-links/style.css` | 1.5 kB | | `build/block-library/blocks/spacer/editor-rtl.css` | 346 B | | `build/block-library/blocks/spacer/editor.css` | 346 B | | `build/block-library/blocks/spacer/style-rtl.css` | 48 B | | `build/block-library/blocks/spacer/style.css` | 48 B | | `build/block-library/blocks/table-of-contents/style-rtl.css` | 83 B | | `build/block-library/blocks/table-of-contents/style.css` | 83 B | | `build/block-library/blocks/table/editor-rtl.css` | 394 B | | `build/block-library/blocks/table/editor.css` | 394 B | | `build/block-library/blocks/table/style-rtl.css` | 640 B | | `build/block-library/blocks/table/style.css` | 639 B | | `build/block-library/blocks/table/theme-rtl.css` | 152 B | | `build/block-library/blocks/table/theme.css` | 152 B | | `build/block-library/blocks/tag-cloud/editor-rtl.css` | 144 B | | `build/block-library/blocks/tag-cloud/editor.css` | 144 B | | `build/block-library/blocks/tag-cloud/style-rtl.css` | 266 B | | `build/block-library/blocks/tag-cloud/style.css` | 265 B | | `build/block-library/blocks/template-part/editor-rtl.css` | 368 B | | `build/block-library/blocks/template-part/editor.css` | 368 B | | `build/block-library/blocks/template-part/theme-rtl.css` | 113 B | | `build/block-library/blocks/template-part/theme.css` | 113 B | | `build/block-library/blocks/term-description/style-rtl.css` | 126 B | | `build/block-library/blocks/term-description/style.css` | 126 B | | `build/block-library/blocks/text-columns/editor-rtl.css` | 95 B | | `build/block-library/blocks/text-columns/editor.css` | 95 B | | `build/block-library/blocks/text-columns/style-rtl.css` | 165 B | | `build/block-library/blocks/text-columns/style.css` | 165 B | | `build/block-library/blocks/verse/style-rtl.css` | 98 B | | `build/block-library/blocks/verse/style.css` | 98 B | | `build/block-library/blocks/video/editor-rtl.css` | 441 B | | `build/block-library/blocks/video/editor.css` | 442 B | | `build/block-library/blocks/video/style-rtl.css` | 192 B | | `build/block-library/blocks/video/style.css` | 192 B | | `build/block-library/blocks/video/theme-rtl.css` | 134 B | | `build/block-library/blocks/video/theme.css` | 134 B | | `build/block-library/classic-rtl.css` | 179 B | | `build/block-library/classic.css` | 179 B | | `build/block-library/common-rtl.css` | 1.08 kB | | `build/block-library/common.css` | 1.08 kB | | `build/block-library/editor-elements-rtl.css` | 75 B | | `build/block-library/editor-elements.css` | 75 B | | `build/block-library/editor-rtl.css` | 11.7 kB | | `build/block-library/editor.css` | 11.7 kB | | `build/block-library/elements-rtl.css` | 54 B | | `build/block-library/elements.css` | 54 B | | `build/block-library/index.min.js` | 221 kB | | `build/block-library/reset-rtl.css` | 472 B | | `build/block-library/reset.css` | 472 B | | `build/block-library/style-rtl.css` | 15 kB | | `build/block-library/style.css` | 15 kB | | `build/block-library/theme-rtl.css` | 708 B | | `build/block-library/theme.css` | 712 B | | `build/block-serialization-default-parser/index.min.js` | 1.12 kB | | `build/block-serialization-spec-parser/index.min.js` | 2.87 kB | | `build/blocks/index.min.js` | 52.7 kB | | `build/commands/index.min.js` | 16.1 kB | | `build/commands/style-rtl.css` | 955 B | | `build/commands/style.css` | 952 B | | `build/components/index.min.js` | 228 kB | | `build/components/style-rtl.css` | 12.4 kB | | `build/components/style.css` | 12.4 kB | | `build/compose/index.min.js` | 12.7 kB | | `build/core-commands/index.min.js` | 3.08 kB | | `build/core-data/index.min.js` | 74.3 kB | | `build/customize-widgets/index.min.js` | 11 kB | | `build/customize-widgets/style-rtl.css` | 1.35 kB | | `build/customize-widgets/style.css` | 1.35 kB | | `build/data-controls/index.min.js` | 641 B | | `build/data/index.min.js` | 8.69 kB | | `build/date/index.min.js` | 18 kB | | `build/deprecated/index.min.js` | 458 B | | `build/dom-ready/index.min.js` | 325 B | | `build/dom/index.min.js` | 4.66 kB | | `build/edit-post/classic-rtl.css` | 578 B | | `build/edit-post/classic.css` | 580 B | | `build/edit-post/index.min.js` | 13.5 kB | | `build/edit-post/style-rtl.css` | 2.76 kB | | `build/edit-post/style.css` | 2.75 kB | | `build/edit-site/index.min.js` | 219 kB | | `build/edit-site/posts-rtl.css` | 7.5 kB | | `build/edit-site/posts.css` | 7.5 kB | | `build/edit-site/style-rtl.css` | 13.3 kB | | `build/edit-site/style.css` | 13.4 kB | | `build/edit-widgets/index.min.js` | 17.7 kB | | `build/edit-widgets/style-rtl.css` | 4.09 kB | | `build/edit-widgets/style.css` | 4.09 kB | | `build/editor/index.min.js` | 112 kB | | `build/editor/style-rtl.css` | 9.66 kB | | `build/editor/style.css` | 9.68 kB | | `build/element/index.min.js` | 4.82 kB | | `build/escape-html/index.min.js` | 537 B | | `build/format-library/index.min.js` | 8.05 kB | | `build/format-library/style-rtl.css` | 476 B | | `build/format-library/style.css` | 476 B | | `build/hooks/index.min.js` | 1.65 kB | | `build/html-entities/index.min.js` | 445 B | | `build/i18n/index.min.js` | 3.58 kB | | `build/is-shallow-equal/index.min.js` | 526 B | | `build/keyboard-shortcuts/index.min.js` | 1.31 kB | | `build/keycodes/index.min.js` | 1.46 kB | | `build/list-reusable-blocks/index.min.js` | 2.13 kB | | `build/list-reusable-blocks/style-rtl.css` | 852 B | | `build/list-reusable-blocks/style.css` | 852 B | | `build/media-utils/index.min.js` | 3.58 kB | | `build/notices/index.min.js` | 946 B | | `build/nux/index.min.js` | 1.62 kB | | `build/nux/style-rtl.css` | 749 B | | `build/nux/style.css` | 745 B | | `build/patterns/index.min.js` | 7.37 kB | | `build/patterns/style-rtl.css` | 687 B | | `build/patterns/style.css` | 685 B | | `build/plugins/index.min.js` | 1.86 kB | | `build/preferences-persistence/index.min.js` | 2.06 kB | | `build/preferences/index.min.js` | 2.9 kB | | `build/preferences/style-rtl.css` | 554 B | | `build/preferences/style.css` | 554 B | | `build/primitives/index.min.js` | 829 B | | `build/priority-queue/index.min.js` | 1.54 kB | | `build/private-apis/index.min.js` | 961 B | | `build/react-i18n/index.min.js` | 630 B | | `build/react-refresh-entry/index.min.js` | 9.47 kB | | `build/react-refresh-runtime/index.min.js` | 6.76 kB | | `build/redux-routine/index.min.js` | 2.7 kB | | `build/reusable-blocks/index.min.js` | 2.55 kB | | `build/reusable-blocks/style-rtl.css` | 256 B | | `build/reusable-blocks/style.css` | 256 B | | `build/rich-text/index.min.js` | 10.2 kB | | `build/router/index.min.js` | 2.11 kB | | `build/server-side-render/index.min.js` | 1.94 kB | | `build/shortcode/index.min.js` | 1.4 kB | | `build/style-engine/index.min.js` | 2.04 kB | | `build/token-list/index.min.js` | 581 B | | `build/url/index.min.js` | 3.9 kB | | `build/vendors/react-dom.min.js` | 41.7 kB | | `build/vendors/react-jsx-runtime.min.js` | 556 B | | `build/vendors/react.min.js` | 4.02 kB | | `build/viewport/index.min.js` | 965 B | | `build/vips/index.min.js` | 36.2 kB | | `build/warning/index.min.js` | 250 B | | `build/widgets/index.min.js` | 7.16 kB | | `build/widgets/style-rtl.css` | 1.16 kB | | `build/widgets/style.css` | 1.16 kB | | `build/wordcount/index.min.js` | 1.03 kB |

_{compressed-size-action}

[github-actions[bot]]

Flaky tests detected in 96cf87d8699abbdd4985a68a2a8d1c1b756f2d71. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11955844505 📝 Reported issues:

• 61884 in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js

[jasmussen]

Thanks for the PR, thanks for the ping! I ran storybook, and sure enough, there's a solid new icon.

However, the use cases outlined in the initial comment gives me a bit of pause, because there are some do's and dont's that we need to be careful of, for this particular utility icon. Notably, the icon should always have a stroke, unless it's black. That is part of the morphology of the icons. I recognize there's a use case of colorizing the stroke of the icon according to any border-color set, it's not actually clear to me that we want to do that. But entertaining the thought, the following could be okay:

Note here how there's always a stroke, and that stroke is on the inside. This is what I see in the original examples, the stroke being applied on the outside, and some cases of showing the icon in just a single color, without any of the black color:

Stacked to illustrate inner vs. outer strokes:

The black color of the icon serves a contrast purpose. It is colored according to the UI to ensure there's always at least 3:1 contrast with the surroundings.

For that same reason, I'm ultimately hesitant about adding a fully filled icon like this, at all, because it's not clear you should ever use it like that. The function is only ever designed to show a single color, like so:

I understand that the above is a bit tricky to achieve with how the icon is structured at the moment. Perhaps there's a separate utility component created, that is not part of the library, that has things separated out more cleanly?

[aaronrobertshaw]

@matiasbenedetto might be able to answer better than I but this PR aimed to make the icon more flexible than our real world use case in https://github.com/WordPress/gutenberg/issues/66465#issuecomment-2439960078 & https://github.com/WordPress/gutenberg/pull/67140 requires.

Notably, the icon should always have a stroke, unless it's black

If this icon did always have a stroke would that make it suitable for inclusion in the icon library?

The function is only ever designed to show a single color, like so:

I think this aligns exactly with the intended use in #67140.

[jasmussen]

If this icon did always have a stroke would that make it suitable for inclusion in the icon library?

Certainly.

If I can include a color icon and not do anything else, and I get the outlined version with a white background, it's a candate. If I can also provide it a second color that only affects the white background inside the stroke, that's fine too from my perspective. So to be clear I don't mean to block anything from landing in the icons package, rather offer opportunities as far as what's best on the dev side, i.e. if you need additional features in order to colorize the inner fill of the droplet, we could have the inert non-functional icon, and a duplicate that exists just for when the innards need color.

[jasmussen]

Was that clear? The thing about landing in the icons library means we also add it to the Figma WordPress Design System, where people use the icons for mockups. If there's a utility icon there that's never meant to be used on its own, it probably shouldn't be part of the library.