Skip to content

Conversation

@adidahiya
Copy link
Contributor

@adidahiya adidahiya commented Dec 8, 2023

Fixes #6591

Changes proposed in this pull request:

Fix attribute name typo

This 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 attribute
is still difficult to use in our statically-generated icon components (<AddClip>, <Calendar>, etc.) which rely on a centered scale transform="..." 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:

Reviewers should focus on:

No regressions in icon behavior

Screenshot

image

image

image

@adidahiya adidahiya changed the title [icons] fix: transformOrigin attribute name [icons] fix: invalid DOM attribute warning for transform-origin Jan 4, 2024
@adidahiya
Copy link
Contributor Author

suppress lint error

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@adidahiya adidahiya merged commit 267f271 into develop Jan 4, 2024
@adidahiya adidahiya deleted the ad/transform-origin-icon branch January 4, 2024 17:37
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.

Invalid DOM property 'transform-origin' inside icon SVG elements

2 participants