Fix issues with path overrides.

Author: jasmussen

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. ([#78804](https://github.com/WordPress/gutenberg/pull/78804))
+
 ## 34.0.0 (2026-05-27)
 
 ### Breaking Changes

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;
 		}
 

packages/edit-site/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `SidebarNavigationItem`: Stop forcing `style={ { fill: 'currentcolor' } }` on the icon. The explicit override was clobbering stroke-based icons' intrinsic styling. Colour is inherited via CSS `color` and the icon's own declared fills/strokes. ([#78804](https://github.com/WordPress/gutenberg/pull/78804))
+
 ## 6.47.0 (2026-05-27)
 
 ## 6.46.0 (2026-05-14)

packages/edit-site/src/components/sidebar-navigation-item/index.js

@@ -63,13 +63,7 @@ export default function SidebarNavigationItem( {
 			{ ...props }
 		>
 			<HStack justify="flex-start">
-				{ icon && (
-					<Icon
-						style={ { fill: 'currentcolor' } }
-						icon={ icon }
-						size={ 24 }
-					/>
-				) }
+				{ icon && <Icon icon={ icon } size={ 24 } /> }
 				<FlexBlock>{ children }</FlexBlock>
 				{ withChevron && (
 					<Icon

packages/icons/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   Redraw 34 icons as stroke-based for variable stroke-width support (per [#78774](https://github.com/WordPress/gutenberg/pull/78774)): `addCard`, `addTemplate`, `cancelCircleFilled`, `caution`, `cautionFilled`, `code`, `commentAuthorAvatar`, `cover`, `currencyDollar`, `currencyEuro`, `currencyPound`, `drafts`, `help`, `helpFilled`, `image`, `info`, `lifesaver`, `link`, `linkOff`, `navigation`, `notAllowed`, `paragraph`, `pending`, `plusCircle`, `plusCircleFilled`, `published`, `scheduled`, `siteLogo`, `starEmpty`, `starFilled`, `starHalf`, `styles`, `timeToRead`, `tip`. ([#78804](https://github.com/WordPress/gutenberg/pull/78804))
+-   Stroke-based icons now declare `fill` via inline `style` on the outer `<svg>` 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)
 

packages/icons/lib/generate-library.cjs

@@ -262,6 +262,31 @@ 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 = {