diff --git a/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx b/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx index f4041f0390..e6196202ee 100644 --- a/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx +++ b/packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx @@ -128,4 +128,22 @@ describe('', () => { expect(svg).toHaveAttribute('focusable', 'true') }) + + it('should correctly parse hyphenated attributes like stroke-width', () => { + const svgWithHyphenatedAttrs = `` + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('stroke-width', '2') + expect(svg).toHaveAttribute('stroke-linecap', 'round') + }) + + it('should correctly parse unquoted attribute values (non-standard format)', () => { + const svgWithUnquotedAttrs = `` + const { container } = render() + const svg = container.querySelector('svg') + + expect(svg).toHaveAttribute('stroke', 'currentColor') + expect(svg).toHaveAttribute('stroke-width', '2') + }) }) diff --git a/packages/ui-svg-images/src/InlineSVG/index.tsx b/packages/ui-svg-images/src/InlineSVG/index.tsx index bdff06bfb3..df9e8ee97a 100644 --- a/packages/ui-svg-images/src/InlineSVG/index.tsx +++ b/packages/ui-svg-images/src/InlineSVG/index.tsx @@ -199,8 +199,10 @@ class InlineSVG extends Component { function parseAttributes(src: InlineSVGProps['src']) { const attributes: Record = {} const SVGAttributesRegExp = /]*)\s*>/ - const namesAndValuesRegExp = - /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g + // Match either quoted or unquoted attribute values + // Handles both standard format: attr="value" and non-standard: attr=value + // (\S+?) = attribute name, (?:["']([^"']*)["']|(\S+)) = quoted (group 2) OR unquoted (group 3) value + const namesAndValuesRegExp = /(\S+?)=(?:["']([^"']*)["']|(\S+))/g if (typeof src === 'string') { const attributesMatches = SVGAttributesRegExp.exec(src) @@ -211,10 +213,8 @@ function parseAttributes(src: InlineSVGProps['src']) { while (match != null) { if (excludes.indexOf(match[1]) === -1) { - attributes[match[1]] = - match[2] || - (match[3] ? match[3] : match[4] ? match[4] : match[5]) || - match[1] + // match[1] = attribute name, match[2] = quoted value, match[3] = unquoted value + attributes[match[1]] = match[2] || match[3] } match = namesAndValuesRegExp.exec(attributesString) }