Skip to content

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

Merged
joyenjoyer merged 1 commit intomasterfrom
INSTUI-4939-fix-svg-icon-component-fails-to-add-the-correct-stroke-width-to-icons
Feb 24, 2026
Merged

fix(ui-svg-images): fix inlinesvg parser#2415
joyenjoyer merged 1 commit intomasterfrom
INSTUI-4939-fix-svg-icon-component-fails-to-add-the-correct-stroke-width-to-icons

Conversation

@joyenjoyer
Copy link
Contributor

@joyenjoyer joyenjoyer commented Feb 19, 2026

Closes INSTUI-4939

Fixed InlineSVG attribute parsing bug where hyphenated SVG attributes (like stroke-width) were incorrectly parsed with extra quote characters by replacing the complex regex with a simpler solution that handles both quoted and unquoted (for backward compatibility) attribute values.

Test:

  1. Use SVGIcon, set the src prop (use an svg with the stroke-width attribute, for example <SVGIcon src='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><circle cx="12" cy="12" r="10"/></svg>' /> )
  2. Inspect the SVGIcon and see if the stroke-width attribute's value is set correctly (opening and closing quotes are there)

@github-actions
Copy link

github-actions bot commented Feb 19, 2026

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-02-24 09:23 UTC

@joyenjoyer joyenjoyer self-assigned this Feb 20, 2026
const namesAndValuesRegExp =
/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g
// Match either quoted or unquoted attribute values
// Handles both standard format: attr="value" and non-standard: attr=value
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would skip handling the non-standard format but we have to support it for backward compatibility.

Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good, I checked the icons too, they work

Comment on lines -214 to -217
attributes[match[1]] =
match[2] ||
(match[3] ? match[3] : match[4] ? match[4] : match[5]) ||
match[1]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont understand the old code here... how can there be 5 matches?

Copy link
Contributor Author

@joyenjoyer joyenjoyer Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried it and match[4] and match[5] was always undefined for me. I guess the developer improved the regex by trial and error forgot to remove these obsolete capture groups.

@joyenjoyer joyenjoyer merged commit 9fc9675 into master Feb 24, 2026
10 of 11 checks passed
@joyenjoyer joyenjoyer deleted the INSTUI-4939-fix-svg-icon-component-fails-to-add-the-correct-stroke-width-to-icons branch February 24, 2026 09:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants