[icons] fix: invalid DOM attribute warning for transform-origin #6594
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #6591
Changes proposed in this pull request:
Fix attribute name typoThis turned out to be more complicated than originally anticipated. Despite being added to added as a supported SVG attribute to React in 2023, the
transformOrigin
JSX attributeis still difficult to use in our statically-generated icon components (
<AddClip>
,<Calendar>
, etc.) which rely on a centered scaletransform="..."
to display their<path>
elements correctly. To work around this, we now apply the necessary style in CSS instead. Note that this needs to apply directly to the<path>
element and not the container<svg>
.See:
transformOrigin
prop facebook/react#26130Reviewers should focus on:
No regressions in icon behavior
Screenshot