IconRenderer: Support sizing & alignment of custom icons

[michaeltaranto]

Provides support for sizing and aligning custom icons with Braid’s typographic components. The new IconRenderer component supports being used within Text and Heading components as well as inside icon slots of other components.

Uses the render prop pattern to provide the required classes to style and align a custom icon.

EXAMPLE USAGE:

<Heading level="1">
  <IconRenderer>
    {({ className }) => (
      <svg className={className}>
        ...
      </svg>
    )}
  </IconRenderer>
</Heading>

[changeset-bot]

🦋 Changeset detected

Latest commit: 09a1786

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
braid-design-system	Minor

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

[askoufis]

👁️ 🌽

[mrm007]

Very elegant solution 🎩