feat: add octicons-react-symbols package

[joshblack]

Introduce a new package, @primer/octicons-react-symbols, that provides a way for teams to use references to SVGs instead of inlining SVG definitions for each icon.

To do that, this package exposes an OcticonSymbols component that acts as a container for all <symbol> definitions for icons that are provided through the symbols prop. Then, teams may use a {Name}IconReference compoennt to reference that symbol using the <use> element.

The goal of this work is to:

• Reduce HTML payload size on large pages
• Reduce DOM size by reducing the number of svg elements on large pages

If teams are introduced, we could also add lint rules to enforce that certain icons are used as references in specific sub-trees/routes. We could also invest in loading up references automatically for defined boundaries (like routes) when bundling for better DX.

Changelog

New

• Add a new package for rendering icon references instead of inlining SVG definitions

Changed

Removed

Rollout strategy

• Minor release

[changeset-bot]

⚠️ No Changeset found

Latest commit: dd3a50d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[joshblack]

@copilot fix CI

[Copilot]

@copilot fix CI

Fixed in a39dae7. I addressed the CI failures by fixing lint/type-check issues, making Storybook build @primer/octicons-react-symbols before @primer/react Storybook, and adding a changeset.

[joshblack]

@copilot fix CI

[joshblack]

@copilot revert the change in this file

[Copilot]

Done in 511dc47. I reverted the change in .github/workflows/npm.yml.

[joshblack]

@copilot I want to make it so that this library also supports this pattern:

import { ExampleIconSymbol, ExampleIconReference } from '@primer/octicons-react-symbols/Example'

Make an update to our bundling strategy to allow for this and update the package.json exports to allow for wildcard imports to these icons. My assumption is that we can use the generated directory as the target in dist for the wildcard import patterns