You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@phill-85 thanks for the issue! Looks like it's due to a couple of things:
React creates icons via @patternfly/react-icons, which create inline <svg>s that are a square aspect ratio, and the html examples use icon fonts (FontAwesome mostly) that vary in width based on the icon size. There isn't much we can do about that, it's present in a bunch of our examples.
The react icon examples strip the whitespace in the rendered HTML between icon code blocks, and the HTML examples do not, so there is a space character between the HTML icons that isn't present in the react icons. We can update that - I'm thinking it's probably easier to update the react example blocks to preserve the whitespace. @tlabaj wdyt? We could add {' '} between </Icon><Icon> so it's </Icon>{' '}<Icon> (or some other preferred way to do that?)
Describe the problem
Spacing changes between the reach and html icon examples at https://www.patternfly.org/components/icon/html
How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.
Expected behavior
Spacing should remain the same.
Screenshots
If applicable, add screenshots to help explain the issue.
What is your environment?
Firefox snap for ubuntu v129.0.2
Brave Version 1.68.141 (Chromium: 127.0.6533.120 (Official Build) (64-bit))
The text was updated successfully, but these errors were encountered: