fix(ui-svg-images): fix inlinesvg parser

Author: joyenjoyer

packages/ui-svg-images/src/InlineSVG/__tests__/InlineSVG.test.tsx

@@ -128,4 +128,22 @@ describe('<InlineSVG />', () => {
 
     expect(svg).toHaveAttribute('focusable', 'true')
   })
+
+  it('should correctly parse hyphenated attributes like stroke-width', () => {
+    const svgWithHyphenatedAttrs = `<svg stroke-width="2" stroke-linecap="round"><path d="M12 2l3 6"/></svg>`
+    const { container } = render(<InlineSVG src={svgWithHyphenatedAttrs} />)
+    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 = `<svg stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10/></svg>`
+    const { container } = render(<InlineSVG src={svgWithUnquotedAttrs} />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('stroke', 'currentColor')
+    expect(svg).toHaveAttribute('stroke-width', '2')
+  })
 })

packages/ui-svg-images/src/InlineSVG/index.tsx

@@ -199,8 +199,10 @@ class InlineSVG extends Component<InlineSVGProps> {
 function parseAttributes(src: InlineSVGProps['src']) {
   const attributes: Record<string, string> = {}
   const SVGAttributesRegExp = /<svg\s+([^>]*)\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)
     }