feat: add octicons-react-symbols package

.changeset/add-octicons-react-symbols-package.md

@@ -0,0 +1,5 @@
+---
+'@primer/octicons-react-symbols': minor
+---
+
+Octicons React Symbols: Add a package that provides reusable SVG symbol sprites and matching icon components.

.prettierignore

@@ -6,3 +6,4 @@ docs/.cache
 docs/public
 **/.next/**
 packages/react/src/legacy-theme/ts/color-schemes.ts
+packages/octicons-react-symbols/src/generated

eslint.config.mjs

@@ -51,6 +51,7 @@ const config = defineConfig([
     '**/.next/**/*',
     'dist/**/*',
     '**/dist/**/*',
+    'packages/octicons-react-symbols/src/generated/**/*',
     'script/**/*.ts',
     '**/*.module.css.d.ts',
     '**/.playwright/**',

packages/octicons-react-symbols/.gitignore

@@ -0,0 +1 @@
+src/generated/**

packages/octicons-react-symbols/README.md

@@ -0,0 +1,50 @@
+# @primer/octicons-react-symbols
+
+[![npm package](https://img.shields.io/npm/v/@primer/octicons-react-symbols.svg)](https://www.npmjs.com/package/@primer/octicons-react-symbols)
+[![contributors graph](https://img.shields.io/github/contributors/primer/octicons-react.svg)](
+
+> Optimized React components for rendering Octicons with shared SVG symbols
+
+## Getting started
+
+To install `@primer/octicons-react-symbols` in your project, you will need to
+run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @primer/octicons-react-symbols
+```
+
+## Usage
+
+The `@primer/octicons-react-symbols` package provides Octicon components that
+reference shared SVG symbols instead of re-creating the same SVG markup every
+time an icon is rendered. This is useful in apps that render the same icons many
+times, because the symbol definition can be shared while each icon renders a
+small `<svg><use /></svg>` reference.
+
+At the root of your application, wrap your app with `OcticonSymbols`:
+
+```tsx
+import {OcticonSymbols, CheckSymbol} from '@primer/octicons-react-symbols'
+
+function RootLayout() {
+  return (
+    <>
+      <OcticonSymbols>
+        <CheckSymbol />
+      </OcticonSymbols>
+      <App />
+    </>
+  )
+}
+```
+
+Downstream components can render icons normally:
+
+```tsx
+import {CheckIcon} from '@primer/octicons-react-symbols'
+
+function Status() {
+  return <CheckIcon />
+}
+```

packages/octicons-react-symbols/config/vitest/browser/setup.ts

@@ -0,0 +1,13 @@
+import {beforeEach} from 'vitest'
+import {cleanup} from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean
+}
+
+beforeEach(() => {
+  cleanup()
+})
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true

packages/octicons-react-symbols/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@primer/octicons-react-symbols",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    "types": "./dist/generated/index.d.ts",
+    "default": "./dist/generated/index.js"
+  },
+  "scripts": {
+    "build": "node script/build.ts && rolldown -c",
+    "clean": "rimraf dist",
+    "lint:npm": "publint --types",
+    "type-check": "tsc --noEmit",
+    "watch": "rolldown -c -w"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.28.4",
+    "react-compiler-runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/generator": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@primer/octicons": "^19.21.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "change-case": "^5.4.4",
+    "publint": "^0.3.16",
+    "react": "^18.3.1",
+    "rimraf": "^6.1.3",
+    "rolldown": "^1.1.2",
+    "rollup-plugin-typescript2": "^0.37.0",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@types/react": "18.x || 19.x",
+    "react": "18.x || 19.x"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "sideEffects": false
+}

packages/octicons-react-symbols/rolldown.config.js

@@ -0,0 +1,47 @@
+import {defineConfig} from 'rolldown/config'
+import babel from '@rollup/plugin-babel'
+import typescript from 'rollup-plugin-typescript2'
+import packageJson from './package.json' with {type: 'json'}
+
+const external = [
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {}),
+].map(name => new RegExp(`^${name}(/.*)?`))
+
+export default defineConfig({
+  input: ['./src/generated/index.ts'],
+  external,
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.build.json',
+    }),
+    babel({
+      presets: [
+        '@babel/preset-typescript',
+        [
+          '@babel/preset-react',
+          {
+            runtime: 'automatic',
+          },
+        ],
+      ],
+      plugins: [
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+          },
+        ],
+        '@babel/plugin-transform-runtime',
+      ],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      babelHelpers: 'runtime',
+    }),
+  ],
+  output: {
+    dir: './dist',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+  },
+})