Icons render as svg symbols (fix icon clipping)#4229
Draft
BrettJephson wants to merge 9 commits intomainfrom
Draft
Icons render as svg symbols (fix icon clipping)#4229BrettJephson wants to merge 9 commits intomainfrom
BrettJephson wants to merge 9 commits intomainfrom
Conversation
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
🦋 Changeset detectedLatest commit: 21053f5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
Contributor
|
Summary of the deployments:
Test content |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎ Awaiting the start of a new Argos build… |
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
BrettJephson
had a problem deploying
to
2v-preview
GitHub Actions
Failure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This change fixes the rendering of Font Awesome icons, which can become clipped.
Fixes RND-10291
Because we have been loading in the svg as an image file and applying a mask for colour we could not simply use
overflow: visibleto prevent clipping of images that overflow the svg’s viewbox. It is already a rasterized image so we only show the bit in the image canvas.The solution here is to render svg as an actual svg symbol in the document creating a sprite sheet so we are using
useand some id throughout the page and only have one instance of the full svg path in a spritesheet.This better aligns with Font Awesome’s recommended usage on the web and fixes the clipping while keeping the size of icons the same.