mcoker
commented
3 weeks ago @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?) https://github.com/patternfly/patternfly-react/blob/7b64b054146bfffde5bcddda317f2381a6ef540e/packages/react-core/src/components/Icon/examples/IconBasic.tsx#L10-L15
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?