Icons: Add stroke-width support

Adds a strokeWidth prop to the React Icon component and expands the PHP
icon registry's wp_kses allowlist to permit stroke-related attributes
(stroke, stroke-width, stroke-linecap, stroke-linejoin, vector-effect,
fill). Both changes are backwards compatible: the prop is a no-op for
fill-based icons, and existing icons render unchanged.

Updates square.svg to the new convention as a canary: moves stroke
attributes to the outer <svg> so the prop can override them, and adds
vector-effect="non-scaling-stroke" so the stroke renders at a constant
pixel weight at any rendered size.

Adds a Stroke width RangeControl to the icons library Storybook story.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: jasmussen

lib/compat/wordpress-7.0/class-wp-icons-registry.php

@@ -180,27 +180,42 @@ protected function register( $icon_name, $icon_properties ) {
 		protected function sanitize_icon_content( $icon_content ) {
 			$allowed_tags = array(
 				'svg'     => array(
-					'class'       => true,
-					'xmlns'       => true,
-					'width'       => true,
-					'height'      => true,
-					'viewbox'     => true,
-					'aria-hidden' => true,
-					'role'        => true,
-					'focusable'   => true,
+					'class'           => true,
+					'xmlns'           => true,
+					'width'           => true,
+					'height'          => true,
+					'viewbox'         => true,
+					'aria-hidden'     => true,
+					'role'            => true,
+					'focusable'       => true,
+					'fill'            => true,
+					'stroke'          => true,
+					'stroke-width'    => true,
+					'stroke-linecap'  => true,
+					'stroke-linejoin' => true,
 				),
 				'path'    => array(
-					'fill'      => true,
-					'fill-rule' => true,
-					'd'         => true,
-					'transform' => true,
+					'fill'            => true,
+					'fill-rule'       => true,
+					'd'               => true,
+					'transform'       => true,
+					'stroke'          => true,
+					'stroke-width'    => true,
+					'stroke-linecap'  => true,
+					'stroke-linejoin' => true,
+					'vector-effect'   => true,
 				),
 				'polygon' => array(
-					'fill'      => true,
-					'fill-rule' => true,
-					'points'    => true,
-					'transform' => true,
-					'focusable' => true,
+					'fill'            => true,
+					'fill-rule'       => true,
+					'points'          => true,
+					'transform'       => true,
+					'focusable'       => true,
+					'stroke'          => true,
+					'stroke-width'    => true,
+					'stroke-linecap'  => true,
+					'stroke-linejoin' => true,
+					'vector-effect'   => true,
 				),
 			);
 			return wp_kses( $icon_content, $allowed_tags );

packages/icons/src/icon/index.ts

@@ -20,6 +20,13 @@ export interface IconProps extends SVGProps {
 	 * @default 24
 	 */
 	size?: number;
+	/**
+	 * Width of strokes in pixels. Applied to the outer `<svg>` as
+	 * `stroke-width`, inherited by stroked paths. Has no visible effect on
+	 * fill-based icons. Source SVGs of stroke-based icons carry their own
+	 * default; this prop overrides it per call.
+	 */
+	strokeWidth?: number;
 }
 
 /**
@@ -30,12 +37,13 @@ export interface IconProps extends SVGProps {
  * @return Icon component
  */
 export default forwardRef< HTMLElement, IconProps >(
-	( { icon, size = 24, ...props }, ref ) => {
+	( { icon, size = 24, strokeWidth, ...props }, ref ) => {
 		return cloneElement(
 			icon as ReactElement< React.RefAttributes< Element > >,
 			{
 				width: size,
 				height: size,
+				...( strokeWidth !== undefined && { strokeWidth } ),
 				...props,
 				ref,
 			}

packages/icons/src/library/square.svg

@@ -16,6 +16,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
+	RangeControl,
 } from '@wordpress/components';
 
 /**
@@ -79,6 +80,7 @@ const meta: Meta = {
 	argTypes: {
 		filter: { control: false },
 		size: { control: false },
+		strokeWidth: { control: false },
 		highlightPublicIcons: { control: false },
 	},
 };
@@ -87,6 +89,7 @@ export default meta;
 type LibraryArgs = {
 	filter: string;
 	size: string | number;
+	strokeWidth: number;
 	highlightPublicIcons: boolean;
 };
 
@@ -97,6 +100,7 @@ type LibraryExampleProps = LibraryArgs & {
 const LibraryExample = ( {
 	filter,
 	size,
+	strokeWidth,
 	highlightPublicIcons,
 	updateArgs,
 }: LibraryExampleProps ): ReactElement => {
@@ -148,6 +152,19 @@ const LibraryExample = ( {
 							/>
 						) ) }
 					</ToggleGroupControl>
+					<div style={ { width: 200 } }>
+						<RangeControl
+							__next40pxDefaultSize
+							label="Stroke width"
+							value={ strokeWidth }
+							onChange={ ( value: number | undefined ) =>
+								updateArgs( { strokeWidth: value } )
+							}
+							min={ 0.5 }
+							max={ 5 }
+							step={ 0.25 }
+						/>
+					</div>
 					<ToggleControl
 						label="Highlight public icons"
 						checked={ highlightPublicIcons }
@@ -186,6 +203,7 @@ const LibraryExample = ( {
 										<Icon
 											icon={ icon }
 											size={ Number( size ) }
+											strokeWidth={ strokeWidth }
 										/>
 										<span
 											style={ {
@@ -213,6 +231,7 @@ export const Library: StoryObj< typeof meta > = {
 	args: {
 		filter: '',
 		size: '24',
+		strokeWidth: 1.5,
 		highlightPublicIcons: false,
 	},
 	render: function Library() {