feat(StateLabel): add support for labeling svg icon for descriptive names

[joshblack]

Closes https://github.com/github/primer/issues/3316

Update the StateLabel to include support for labeling the icon. This provides additional information as to the resource that is being described (issue, pull request, etc). I also refactored some of the styling code here to make it easier to switch to CSS Modules in the future.

Changelog

New

• Add support for labeling svg icon for descriptive names

Changed

• Update styles to better support transitioning to CSS Modules

Removed

Rollout strategy

• [x] Minor release

Testing & Reviewing

• [ ] Verify accessible name matches what is described in parent issue
• [ ] Verify styles have not regressed between refactors (yay for VRT)

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 070eaedc5db11afdbec9af03b64feb16356199f1

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.71 KB (-0.4% 🔽)
packages/react/dist/browser.umd.js	91 KB (-0.35% 🔽)

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.