diff --git a/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap index 977b1d1a5f6c82..2f36e6e3267910 100644 --- a/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap @@ -9,12 +9,17 @@ exports[`BlockIcon renders a Icon 1`] = ` aria-hidden="true" focusable="false" height="24" + stroke="currentColor" + stroke-width="1.5" + style="fill: none;" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1944bb69f68478..a90781260ddde8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- `ItemGroup`: Drop the blanket `path { fill: currentColor }` rule that was overriding stroke-based icons' intended fill via inheritance bypass. Old fill-based icons remain coloured via the surrounding `svg { fill: currentColor }` rule plus normal SVG inheritance. ([#78808](https://github.com/WordPress/gutenberg/pull/78808)) + ## 34.0.0 (2026-05-27) ### Breaking Changes diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index e40598d383baf7..6b8b60f4337732 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -19,8 +19,7 @@ export const unstyledButton = ( as: 'a' | 'button' ) => { text-align: start; text-decoration: ${ as === 'a' ? 'none' : undefined }; - svg, - path { + svg { fill: currentColor; } diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap index a37644ae7773c8..5889885750615c 100644 --- a/packages/components/src/item-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap @@ -11,8 +11,8 @@ Snapshot Diff: role="listitem" >
@@ -24,8 +24,8 @@ Snapshot Diff: role="listitem" >
@@ -44,8 +44,8 @@ Snapshot Diff: role="listitem" >
@@ -114,8 +114,8 @@ Snapshot Diff: @@ -1,18 +1,18 @@
@@ -142,8 +142,8 @@ Snapshot Diff: @@ -1,18 +1,18 @@
@@ -170,7 +170,7 @@ Snapshot Diff: @@ -1,8 +1,8 @@
- { icon && ( - - ) } + { icon && } { children } { withChevron && ( ` instead of the `fill` attribute, so the source's intent survives ordinary 3rd-party CSS overrides like `.foo svg { fill: currentColor }` without using `!important`. ([#78804](https://github.com/WordPress/gutenberg/pull/78804)) ## 13.2.0 (2026-05-27) diff --git a/packages/icons/lib/generate-library.cjs b/packages/icons/lib/generate-library.cjs index 2c7568dd08f3b6..f39de60d480016 100644 --- a/packages/icons/lib/generate-library.cjs +++ b/packages/icons/lib/generate-library.cjs @@ -262,6 +262,28 @@ function svgToTsx( svgContent ) { } ); + // Convert CSS-string style attributes (e.g. `style="fill: none"`) into JSX + // style object syntax (e.g. `style={ { fill: 'none' } }`). Source SVGs use + // the CSS-string form so they remain valid SVG when read by non-React + // renderers (the PHP path, webpack SVG loaders, raw file preview). + jsxContent = jsxContent.replace( /\sstyle="([^"]*)"/g, ( _, cssString ) => { + const declarations = cssString + .split( ';' ) + .map( ( decl ) => decl.trim() ) + .filter( Boolean ) + .map( ( decl ) => { + const colonIndex = decl.indexOf( ':' ); + const key = decl.slice( 0, colonIndex ).trim(); + const value = decl.slice( colonIndex + 1 ).trim(); + const camelKey = key.replace( /-([a-z])/g, ( _m, c ) => + c.toUpperCase() + ); + return `${ camelKey }: '${ value }'`; + } ) + .join( ', ' ); + return ` style={ { ${ declarations } } }`; + } ); + // Tags that ought to be converted to WordPress primitives when converting // SVGs to React elements const primitives = { diff --git a/packages/icons/src/library/add-card.svg b/packages/icons/src/library/add-card.svg index 91a4565df69349..7bc774b83e0f41 100644 --- a/packages/icons/src/library/add-card.svg +++ b/packages/icons/src/library/add-card.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/add-template.svg b/packages/icons/src/library/add-template.svg index 31b6107afcb629..6fdd6d46f17ae9 100644 --- a/packages/icons/src/library/add-template.svg +++ b/packages/icons/src/library/add-template.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/cancel-circle-filled.svg b/packages/icons/src/library/cancel-circle-filled.svg index 63dce97f380000..b3340ef8537b49 100644 --- a/packages/icons/src/library/cancel-circle-filled.svg +++ b/packages/icons/src/library/cancel-circle-filled.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/caution-filled.svg b/packages/icons/src/library/caution-filled.svg index 6b35a8ea4d0221..71c72044ab2d4f 100644 --- a/packages/icons/src/library/caution-filled.svg +++ b/packages/icons/src/library/caution-filled.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/caution.svg b/packages/icons/src/library/caution.svg index 3e6c70c263b9ad..11ec7b1df426f8 100644 --- a/packages/icons/src/library/caution.svg +++ b/packages/icons/src/library/caution.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/code.svg b/packages/icons/src/library/code.svg index 24d4bdccbd5a27..65b1f5fd069d3d 100644 --- a/packages/icons/src/library/code.svg +++ b/packages/icons/src/library/code.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/comment-author-avatar.svg b/packages/icons/src/library/comment-author-avatar.svg index d26ae18218da43..ff2e183d9ac01d 100644 --- a/packages/icons/src/library/comment-author-avatar.svg +++ b/packages/icons/src/library/comment-author-avatar.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/packages/icons/src/library/cover.svg b/packages/icons/src/library/cover.svg index d625a018cda7f2..e8bba8300fb471 100644 --- a/packages/icons/src/library/cover.svg +++ b/packages/icons/src/library/cover.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/packages/icons/src/library/currency-dollar.svg b/packages/icons/src/library/currency-dollar.svg index 80089d8d68c355..26c7e2728d80d7 100644 --- a/packages/icons/src/library/currency-dollar.svg +++ b/packages/icons/src/library/currency-dollar.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/currency-euro.svg b/packages/icons/src/library/currency-euro.svg index 2e57f3726ec9e9..0f34f13dfe3274 100644 --- a/packages/icons/src/library/currency-euro.svg +++ b/packages/icons/src/library/currency-euro.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/currency-pound.svg b/packages/icons/src/library/currency-pound.svg index 5a86fa25075e9e..373a87b54819bf 100644 --- a/packages/icons/src/library/currency-pound.svg +++ b/packages/icons/src/library/currency-pound.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/drafts.svg b/packages/icons/src/library/drafts.svg index 4cd55eee757b59..38370cc6ece1ff 100644 --- a/packages/icons/src/library/drafts.svg +++ b/packages/icons/src/library/drafts.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/help-filled.svg b/packages/icons/src/library/help-filled.svg index 9c8cf7e6b5c07c..e8364992522364 100644 --- a/packages/icons/src/library/help-filled.svg +++ b/packages/icons/src/library/help-filled.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/help.svg b/packages/icons/src/library/help.svg index ae2167edb7ce50..85d465377f0d06 100644 --- a/packages/icons/src/library/help.svg +++ b/packages/icons/src/library/help.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/image.svg b/packages/icons/src/library/image.svg index e14678e2cf4abe..36aa667cdb6e18 100644 --- a/packages/icons/src/library/image.svg +++ b/packages/icons/src/library/image.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/info.svg b/packages/icons/src/library/info.svg index 9d7afc85fae839..ebd757078da72f 100644 --- a/packages/icons/src/library/info.svg +++ b/packages/icons/src/library/info.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/lifesaver.svg b/packages/icons/src/library/lifesaver.svg index 766784ed531bdf..55a9675f3c9351 100644 --- a/packages/icons/src/library/lifesaver.svg +++ b/packages/icons/src/library/lifesaver.svg @@ -1,3 +1,12 @@ - - + + + + + + + + + + + diff --git a/packages/icons/src/library/link-off.svg b/packages/icons/src/library/link-off.svg index bb22938f6522af..0114cfc0423985 100644 --- a/packages/icons/src/library/link-off.svg +++ b/packages/icons/src/library/link-off.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/link.svg b/packages/icons/src/library/link.svg index 5be28f494efe5a..3b26817bab185b 100644 --- a/packages/icons/src/library/link.svg +++ b/packages/icons/src/library/link.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/navigation.svg b/packages/icons/src/library/navigation.svg index 9897b55a119271..ef6001c9dcb932 100644 --- a/packages/icons/src/library/navigation.svg +++ b/packages/icons/src/library/navigation.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/not-allowed.svg b/packages/icons/src/library/not-allowed.svg index 4550385ac2e3af..fa41012112a8b9 100644 --- a/packages/icons/src/library/not-allowed.svg +++ b/packages/icons/src/library/not-allowed.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/paragraph.svg b/packages/icons/src/library/paragraph.svg index a5945a65500e6b..b76197865e9d70 100644 --- a/packages/icons/src/library/paragraph.svg +++ b/packages/icons/src/library/paragraph.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/pending.svg b/packages/icons/src/library/pending.svg index ef3b154b2240fc..88af35d308d692 100644 --- a/packages/icons/src/library/pending.svg +++ b/packages/icons/src/library/pending.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/plus-circle-filled.svg b/packages/icons/src/library/plus-circle-filled.svg index e46a7e178e589a..c93af2a131c3c8 100644 --- a/packages/icons/src/library/plus-circle-filled.svg +++ b/packages/icons/src/library/plus-circle-filled.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/plus-circle.svg b/packages/icons/src/library/plus-circle.svg index 9ab6d1bbd7fee7..c03320908c329e 100644 --- a/packages/icons/src/library/plus-circle.svg +++ b/packages/icons/src/library/plus-circle.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/published.svg b/packages/icons/src/library/published.svg index 13dfc4bb181645..534c6282f33a97 100644 --- a/packages/icons/src/library/published.svg +++ b/packages/icons/src/library/published.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/scheduled.svg b/packages/icons/src/library/scheduled.svg index 1a1e769092211f..d2b32b43f7de85 100644 --- a/packages/icons/src/library/scheduled.svg +++ b/packages/icons/src/library/scheduled.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/site-logo.svg b/packages/icons/src/library/site-logo.svg index 26b6cfb4ce689b..7af55495dcbfa5 100644 --- a/packages/icons/src/library/site-logo.svg +++ b/packages/icons/src/library/site-logo.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/square.svg b/packages/icons/src/library/square.svg index 3b66d51854cb1b..a75233a7e42a3e 100644 --- a/packages/icons/src/library/square.svg +++ b/packages/icons/src/library/square.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/star-empty.svg b/packages/icons/src/library/star-empty.svg index 75cd0e122d458c..8137f625c22f98 100644 --- a/packages/icons/src/library/star-empty.svg +++ b/packages/icons/src/library/star-empty.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/star-filled.svg b/packages/icons/src/library/star-filled.svg index 2b32a6424776ad..4c407ff2cc1eab 100644 --- a/packages/icons/src/library/star-filled.svg +++ b/packages/icons/src/library/star-filled.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/src/library/star-half.svg b/packages/icons/src/library/star-half.svg index fe0f1b5ca0b163..391acb64a74921 100644 --- a/packages/icons/src/library/star-half.svg +++ b/packages/icons/src/library/star-half.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/styles.svg b/packages/icons/src/library/styles.svg index 377fa2e6bb4580..e3d2906a27248b 100644 --- a/packages/icons/src/library/styles.svg +++ b/packages/icons/src/library/styles.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/time.svg b/packages/icons/src/library/time.svg index fd368c5e4fc808..ca2d8b952c5a39 100644 --- a/packages/icons/src/library/time.svg +++ b/packages/icons/src/library/time.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/icons/src/library/tip.svg b/packages/icons/src/library/tip.svg index 212885ca47e506..c698691bbeaa40 100644 --- a/packages/icons/src/library/tip.svg +++ b/packages/icons/src/library/tip.svg @@ -1,3 +1,3 @@ - - + +