Bug - [Component] - Spacing discrepancy between react and html examples

[phill-85]

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?

• OS: Ubuntu 24.04
• Browser:
  Firefox snap for ubuntu v129.0.2
  Brave Version 1.68.141 (Chromium: 127.0.6533.120 (Official Build) (64-bit))

[mcoker]

@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?)

  patternfly-react/packages/react-core/src/components/Icon/examples/IconBasic.tsx

  Lines 10 to 15 in 7b64b05

  	<Icon>
  	<LongArrowAltDownIcon />
  	</Icon>
  	<Icon>
  	<AngleRightIcon />
  	</Icon>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.