diff --git a/src/block-components/icon/index.js b/src/block-components/icon/index.js index 6ddab02f5..6c3e5fbb8 100644 --- a/src/block-components/icon/index.js +++ b/src/block-components/icon/index.js @@ -63,7 +63,14 @@ const LinearGradient = ( { const NOOP = () => {} const getSvgDef = ( href, viewBox = '0 0 24 24' ) => { - return `` + const viewBoxValues = viewBox.trim().split( /[\s,]+/ ) + // The symbol keeps its original origin to map its paths, while the wrapper + // starts at zero so the instance remains inside the visible viewport. + const normalizedViewBox = viewBoxValues.length === 4 && viewBoxValues.every( value => Number.isFinite( Number( value ) ) ) + ? `0 0 ${ viewBoxValues[ 2 ] } ${ viewBoxValues[ 3 ] }` + : viewBox + + return `` } const generateIconId = () => { @@ -457,4 +464,3 @@ Icon.InspectorControls = Edit Icon.addAttributes = addAttributes Icon.addStyles = addStyles - diff --git a/src/plugins/page-icons/page-icons.js b/src/plugins/page-icons/page-icons.js index 5f9bd4d5f..b645bba72 100644 --- a/src/plugins/page-icons/page-icons.js +++ b/src/plugins/page-icons/page-icons.js @@ -72,10 +72,15 @@ const parseSVGString = svgString => { while ( ( attrMatch = attrRegex.exec( attributesPart ) ) !== null ) { const key = attrMatch[ 1 ] const attrNameLower = key.toLowerCase() + const value = attrMatch[ 2 ] || attrMatch[ 3 ] || attrMatch[ 4 ] || '' // Skip width and height as symbols don't need them - if ( attrNameLower !== 'width' && attrNameLower !== 'height' && ! attrNameLower.startsWith( 'on' ) ) { - // Value can be in double quotes, single quotes, or unquoted - const value = attrMatch[ 2 ] || attrMatch[ 3 ] || attrMatch[ 4 ] || '' + // Skip explicit fills so each instance can inherit its block's icon color. + // Preserve fill="none" because it is structural for stroke-based icons. + if ( attrNameLower !== 'width' && + attrNameLower !== 'height' && + ! attrNameLower.startsWith( 'on' ) && + ( attrNameLower !== 'fill' || value.trim().toLowerCase() === 'none' ) + ) { svgAttributes[ key ] = value } }