{"_id":"@bradleyhodges/sfsymbols-react","_rev":"6-108c4ce4accfd4ae6628b956bd6873f8","name":"@bradleyhodges/sfsymbols-react","dist-tags":{"latest":"8.1.3"},"versions":{"7.0.4":{"name":"@bradleyhodges/sfsymbols-react","version":"7.0.4","author":{"name":"Bradley Hodges"},"_id":"@bradleyhodges/sfsymbols-react@7.0.4","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"dist":{"shasum":"815aa014223f986693254bd6f95ef885e58f76bd","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-7.0.4.tgz","fileCount":19,"integrity":"sha512-s7w+fPRvJOzN0kVv0h5yUmTpw2la29i9iaAtNav0FtSLaOJypww82JoVuXFolQZauMhGF5iNOF0khtKk+1nqYA==","signatures":[{"sig":"MEYCIQCl84u1tAe3JPHpJRXwOWbFyNbuD7ux1ccoPjmfPiX43AIhAJlhNaC8FXqaHqbXKt616gNnKh4mUVELRSkX1FnX+Ylq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32812},"main":"dist/main/index.js","types":"./dist/main/index.d.ts","module":"dist/module/index.js","exports":{".":{"import":"./dist/module/index.js","require":"./dist/main/index.js"}},"gitHead":"b8f2480bb8e770c43a723e469892ed490cf59edc","scripts":{"pub":"npm publish --access public --no-git-checks","build":"rimraf ./dist && tsc && tsc && tsc -p tsconfig.main.json","clean":"git clean -xdf .cache .turbo node_modules -f","format":"biome check . --write --skip-errors","bump-deps":"npx npm-check-updates -u -x chalk && pnpm up --latest --filter=!chalk && pnpm run format","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"repository":{"url":"git+https://github.com/bradleyhodges/sfsymbols-react.git","type":"git"},"_npmVersion":"10.9.2","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","directories":{},"_nodeVersion":"22.15.1","dependencies":{"clsx":"^2.1.1","next":"^15.3.4","react":"^19.1.0","react-dom":"^19.1.0","@types/node":"24.0.7","tailwind-merge":"^3.3.1","@bradleyhodges/sfsymbols-types":"7.0.4"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rimraf":"^6.0.1","ts-node":"^10.9.2","typescript":"^5.8.3","@types/node":"22.10.5","@types/react":"^19.1.6","@biomejs/biome":"1.9.4","@types/react-dom":"^19.1.6"},"_npmOperationalInternal":{"tmp":"tmp/sfsymbols-react_7.0.4_1758591785481_0.014237006314668177","host":"s3://npm-registry-packages-npm-production"}},"8.0.2":{"name":"@bradleyhodges/sfsymbols-react","version":"8.0.2","author":{"name":"Bradley Hodges"},"_id":"@bradleyhodges/sfsymbols-react@8.0.2","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"dist":{"shasum":"aab9ef51cde60301d32b774ae36c1048a6f30654","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-8.0.2.tgz","fileCount":15,"integrity":"sha512-Bs+HXWT6Ox1id0wqvNL24Qv0SMeBSJPQppEzVx4Q5V06fkil1+4DssIJvax80ZFGfE6fvZ1OPyVN+SfX9OyuIQ==","signatures":[{"sig":"MEQCIDrhrOwWoGG6zShBmBi7gmkZZOQDVbaumUWxOGm9cIIBAiA5RN6YaxnNMpWdqU7KzGHJ770WDF7JJNHZir+3bd9sJw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30843},"main":"dist/main/index.js","types":"./dist/main/index.d.ts","module":"dist/module/index.js","exports":{".":{"import":"./dist/module/index.js","require":"./dist/main/index.js"}},"gitHead":"26a432775d64205d6562a26ec396a0e49a4c9639","scripts":{"pub":"pnpm format && npm publish --access public --no-git-checks","build":"rimraf ./dist && tsc && tsc && tsc -p tsconfig.main.json","clean":"git clean -xdf .cache .turbo node_modules -f","format":"biome check . --write --skip-errors","bump-deps":"npx npm-check-updates -u -x 'chalk,@biomejs/biome' && pnpm up --latest --filter=!chalk && pnpm run format","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"repository":{"url":"git+https://github.com/bradleyhodges/sfsymbols-react.git","type":"git"},"_npmVersion":"11.13.0","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","directories":{},"_nodeVersion":"24.16.0","dependencies":{"cn":"^0.2.5","next":"^16.3.4","react":"^19.2.8","react-dom":"^19.2.8","@types/node":"26.4.1","tailwind-merge":"^3.6.0","@bradleyhodges/sfsymbols-types":"8.0.2"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rimraf":"^6.1.3","ts-node":"^10.9.2","typescript":"^7.0.2","@types/node":"26.4.1","@types/react":"^19.2.18","@biomejs/biome":"1.9.4","@types/react-dom":"^19.2.7"},"_npmOperationalInternal":{"tmp":"tmp/sfsymbols-react_8.0.2_1788690247504_0.4813544079753074","host":"s3://npm-registry-packages-npm-production"}},"8.0.3":{"name":"@bradleyhodges/sfsymbols-react","version":"8.0.3","author":{"name":"Bradley Hodges"},"_id":"@bradleyhodges/sfsymbols-react@8.0.3","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"dist":{"shasum":"3f8613d7544acf4fa911dee70537baff2114ad0a","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-8.0.3.tgz","fileCount":15,"integrity":"sha512-V4fdsO0sXi93ORrfC9gSrlYlvOpicrBZ42TbMaUxoRHTRYSMmV7fIfO5xPjOQQIbm3OzgG3SmHC31bVtH1AU1g==","signatures":[{"sig":"MEQCIE05MxUCLpKDfE9bUgJEZoO6l2e6+YgpWSrJXEbhfdnwAiB8GTbgYIzRuF0du4qBn6ljDXeGLIcY4eSiSaSaxeSJ4w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30862},"main":"dist/main/index.js","types":"./dist/main/index.d.ts","module":"dist/module/index.js","exports":{".":{"import":"./dist/module/index.js","require":"./dist/main/index.js"}},"gitHead":"9a5e88dc5e6ccf52fcb5a864cb49ec5e62c7f714","scripts":{"pub":"pnpm format && npm publish --access public --no-git-checks","build":"rimraf ./dist && tsc && tsc && tsc -p tsconfig.main.json","format":"biome check . --write --skip-errors","bump-deps":"npx npm-check-updates -u -x 'chalk,@biomejs/biome' && pnpm up --latest --filter=!chalk && pnpm run format","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"repository":{"url":"git+https://github.com/bradleyhodges/sfsymbols-react.git","type":"git"},"_npmVersion":"11.13.0","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","directories":{},"_nodeVersion":"24.16.0","dependencies":{"cn":"^0.2.5","next":"^16.3.4","react":"^19.2.8","react-dom":"^19.2.8","@types/node":"26.4.1","tailwind-merge":"^3.6.0","@bradleyhodges/sfsymbols-types":"8.0.3"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rimraf":"^6.1.3","ts-node":"^10.9.2","typescript":"^7.0.2","@types/node":"26.4.1","@types/react":"^19.2.18","@biomejs/biome":"1.9.4","@types/react-dom":"^19.2.7"},"_npmOperationalInternal":{"tmp":"tmp/sfsymbols-react_8.0.3_1788699089623_0.6834284500597054","host":"s3://npm-registry-packages-npm-production"}},"8.0.4":{"name":"@bradleyhodges/sfsymbols-react","version":"8.0.4","author":{"name":"Bradley Hodges"},"_id":"@bradleyhodges/sfsymbols-react@8.0.4","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"dist":{"shasum":"c228fccb5396ff5ee63276829e469ef277a592fe","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-8.0.4.tgz","fileCount":15,"integrity":"sha512-M6swfo2bFcFo4Na6oyV5m6z3I2iE0IBK/p5xvI/wU3qyOi+EHwOtUNcuAcLR61HuDMzTKcHMEdTMXC+Rj0wb/g==","signatures":[{"sig":"MEUCIQCcHq97UI3wVO6Qo/4IhHhFtzaNpF6pqaDaW+B50vzuAgIgAeEUlkrA9S+tvO0/Fn+Wkkj4endhKFJVHzMm/QObqSU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30905},"main":"dist/main/index.js","types":"./dist/main/index.d.ts","module":"dist/module/index.js","exports":{".":{"import":"./dist/module/index.js","require":"./dist/main/index.js"}},"gitHead":"9a5e88dc5e6ccf52fcb5a864cb49ec5e62c7f714","scripts":{"pub":"pnpm format && npm publish --access public --no-git-checks","build":"rimraf ./dist && tsc && tsc && tsc -p tsconfig.main.json","format":"biome check . --write --skip-errors","bump-deps":"npx npm-check-updates -u -x 'chalk,@biomejs/biome' && pnpm up --latest --filter=!chalk && pnpm run format","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"repository":{"url":"git+https://github.com/bradleyhodges/sfsymbols-react.git","type":"git"},"_npmVersion":"11.13.0","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","directories":{},"_nodeVersion":"24.16.0","dependencies":{"cn":"^0.2.5","next":"^16.3.4","react":"^19.2.8","react-dom":"^19.2.8","@types/node":"26.4.1","tailwind-merge":"^3.6.0","@bradleyhodges/sfsymbols-types":"8.0.4"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rimraf":"^6.1.3","ts-node":"^10.9.2","typescript":"^7.0.2","@types/node":"26.4.1","@types/react":"^19.2.18","@biomejs/biome":"1.9.4","@types/react-dom":"^19.2.7"},"_npmOperationalInternal":{"tmp":"tmp/sfsymbols-react_8.0.4_1788701600539_0.5397884372480859","host":"s3://npm-registry-packages-npm-production"}},"8.1.1":{"name":"@bradleyhodges/sfsymbols-react","version":"8.1.1","author":{"name":"Bradley Hodges"},"_id":"@bradleyhodges/sfsymbols-react@8.1.1","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"dist":{"shasum":"d8f5011a8fd47d047e069c47f1de66a41d6afa02","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-8.1.1.tgz","fileCount":15,"integrity":"sha512-i440A6nWXyE1Y3Bl3p0ZHnoNbtRMk6vl5s3u5IrCE2JR+ljPps1M8bCINiZhRxaMEnxAQWcSeLcB4xUoCIILtg==","signatures":[{"sig":"MEUCIQC9ImYy72o8MZ/HQdo54PH8cWTpUIPUJ/n8+6mY90KfBgIgFC9/9lqnQD0RWaygpdeFN7ZIm9SvKy57M2sBveO1T/8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29277},"main":"dist/main/index.js","types":"./dist/main/index.d.ts","module":"dist/module/index.js","exports":{".":{"import":"./dist/module/index.js","require":"./dist/main/index.js"}},"gitHead":"222f94ff2b8d1a2fb9caa903d0aad722ed814994","scripts":{"pub":"pnpm format && npm publish --access public --no-git-checks","build":"rimraf ./dist && tsc && tsc && tsc -p tsconfig.main.json","format":"biome check . --write --skip-errors","bump-deps":"npx npm-check-updates -u -x 'chalk,@biomejs/biome' && pnpm up --latest --filter=!chalk && pnpm run format","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"repository":{"url":"git+https://github.com/bradleyhodges/sfsymbols-react.git","type":"git"},"_npmVersion":"11.13.0","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","directories":{},"_nodeVersion":"24.16.0","dependencies":{"cn":"^0.2.5","next":"^16.3.4","react":"^19.2.8","react-dom":"^19.2.8","@types/node":"26.4.1","tailwind-merge":"^3.6.0","@bradleyhodges/sfsymbols-types":"8.1.1"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rimraf":"^6.1.3","ts-node":"^10.9.2","typescript":"^7.0.2","@types/node":"26.4.1","@types/react":"^19.2.18","@biomejs/biome":"1.9.4","@types/react-dom":"^19.2.7"},"_npmOperationalInternal":{"tmp":"tmp/sfsymbols-react_8.1.1_1788770977259_0.12246338083105668","host":"s3://npm-registry-packages-npm-production"}},"8.1.3":{"name":"@bradleyhodges/sfsymbols-react","description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","version":"8.1.3","main":"./dist/main/index.js","module":"./dist/module/index.js","types":"./dist/main/index.d.ts","sideEffects":false,"scripts":{"build":"node scripts/build.cjs","test":"pnpm run build && node --test tests/*.test.cjs","lint":"biome check src scripts tests package.json tsconfig.json tsconfig.main.json","verify-package":"node scripts/verify-package.cjs","verify-catalogue":"node scripts/verify-catalogue.cjs","verify-next":"node scripts/verify-next-fixture.cjs","verify-typescript":"node scripts/verify-typescript-fixture.cjs","fixture:browser":"node scripts/serve-browser-fixture.cjs","prepack":"pnpm run build && pnpm run verify-package","pub":"pnpm format && npm publish --access public --no-git-checks --tag latest","bump-deps":"npx npm-check-updates -u -x 'chalk,@biomejs/biome' && pnpm up --latest --filter=!chalk && pnpm run format","format":"biome check src scripts tests package.json tsconfig.json tsconfig.main.json --write --skip-errors","typecheck":"tsc --noEmit --emitDeclarationOnly false"},"exports":{".":{"import":{"types":"./dist/module/index.d.ts","default":"./dist/module/index.js"},"require":{"types":"./dist/main/index.d.ts","default":"./dist/main/index.js"}},"./unstyled":{"import":{"types":"./dist/module/unstyled.d.ts","default":"./dist/module/unstyled.js"},"require":{"types":"./dist/main/unstyled.d.ts","default":"./dist/main/unstyled.js"}},"./metadata":{"import":{"types":"./dist/module/metadata.d.ts","default":"./dist/module/metadata.js"},"require":{"types":"./dist/main/metadata.d.ts","default":"./dist/main/metadata.js"}},"./types":{"import":{"types":"./dist/module/types.d.ts","default":"./dist/module/types.js"},"require":{"types":"./dist/main/types.d.ts","default":"./dist/main/types.js"}}},"typesVersions":{"*":{"unstyled":["dist/main/unstyled.d.ts"],"metadata":["dist/main/metadata.d.ts"],"types":["dist/main/types.d.ts"]}},"repository":{"type":"git","url":"git+https://github.com/bradleyhodges/sfsymbols-react.git"},"bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"author":{"name":"Bradley Hodges"},"devDependencies":{"@biomejs/biome":"1.9.4","@types/react":"^19.2.18","esbuild":"^0.27.2","react":"^19.2.8","react-dom":"^19.2.8","typescript":"^7.0.2"},"dependencies":{"@bradleyhodges/sfsymbols-types":"^8.1.3","cn":"^0.2.5"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"gitHead":"9e98720130a16575ba40d237df78b4aa97fadb6e","_id":"@bradleyhodges/sfsymbols-react@8.1.3","homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-hhFoqpfOk/zWaF7OU8GRjO84+vIKrOVk2qC3lzh3n4MjOmZauJ7o8PYsEwNRZWENbkbzRNiGHi+pijDlyyRYmg==","shasum":"f2b9cb799d3ea639ade45732816f28d7cbcde8b0","tarball":"https://registry.npmjs.org/@bradleyhodges/sfsymbols-react/-/sfsymbols-react-8.1.3.tgz","fileCount":48,"unpackedSize":53831,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCag59NdTk5TJpK8/mFiFHtU94Oyis8N+X3clR0vs8MuAIgPTXroKBBvUzmGnHIQMBxGQqT0TSxW3hZUSPZzioeGn8="}]},"_npmUser":{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"},"directories":{},"maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sfsymbols-react_8.1.3_1788839147748_0.8686558600402872"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-23T01:43:05.353Z","modified":"2026-09-08T03:45:48.090Z","7.0.4":"2025-09-23T01:43:05.658Z","8.0.2":"2026-09-06T10:24:07.651Z","8.0.3":"2026-09-06T12:51:29.746Z","8.0.4":"2026-09-06T13:33:20.680Z","8.1.1":"2026-09-07T08:49:37.385Z","8.1.3":"2026-09-08T03:45:47.888Z"},"bugs":{"url":"https://github.com/bradleyhodges/sfsymbols-react/issues"},"author":{"name":"Bradley Hodges"},"homepage":"https://github.com/bradleyhodges/sfsymbols-react#readme","repository":{"type":"git","url":"git+https://github.com/bradleyhodges/sfsymbols-react.git"},"description":"Components and utilities for using icons from the @bradleyhodges/sfsymbols package in React applications.","maintainers":[{"name":"bradleyhodges","email":"bradley.hodges@outlook.com"}],"readme":"<div align=\"center\">\n\n<h1>@bradleyhodges/sfsymbols-react</h1>\n<h3>Companion package for using Apple's SF Symbols icons from <a href=\"https://github.com/bradleyhodges/sfsymbols\">@bradleyhodges/sfsymbols</a> in React/Next.js.</h3>\n\n<p align=\"center\">\n\t\t\t\t<a href=\"\">\n\t\t\t\t<img alt=\"NPM Downloads by package author\" src=\"https://img.shields.io/npm-stat/dm/bradleyhodges\" />\n\t\t\t\t</a>\n    <a href=\"https://www.npmjs.com/package/@bradleyhodges/sfsymbols-react\">\n\t\t\t\t<img src=\"https://img.shields.io/badge/npmjs-package-red?logo=npm\" alt=\"npmjs package\" />\n    </a>\n    <a href=\"https://github.com/bradleyhodges/sfsymbols-react\">\n\t\t\t\t<img src=\"https://img.shields.io/badge/github-repo-blue?logo=github\" alt=\"GitHub repo\" />\n    </a>\n    <br />\n    <a href=\"https://github.com/bradleyhodges/sfsymbols/releases\">\n\t\t\t\t<img src=\"https://img.shields.io/badge/version-8.1.3-blue.svg\" alt=\"Version: 8.1.3\" />\n    </a>\n\t\t\t\t<a href=\"\">\n    <img src=\"https://img.shields.io/badge/Platforms-Next.js%20|%20React.js%20|%20React%20Native-FF69B4.svg\" alt=\"Platforms: Next.js – React.js – React Nav\" />\n\t\t\t\t</a>\n    <a href=\"https://github.com/bradleyhodges/sfsymbols-react/blob/stable/LICENSE\">\n\t\t\t\t<img src=\"https://img.shields.io/badge/license-MIT-lightgrey.svg\" alt=\"License: MIT\" />\n    </a>\n</p>\n\n<p align=\"center\">SF Symbols is a library of over 7,000 symbols that are designed to integrate seamlessly with San Francisco, the system font for Apple platforms.</p>\n\n<p align=\"center\">\n  <a href=\"#available-icons\">Available Icons</a>\n  • <a href=\"#-getting-started\">🚀 Getting Started</a>\n  • <a href=\"#install-the-packages\">Install</a>\n  • <a href=\"#usage\">Usage</a>\n  • <a href=\"#optimising-for-performance\">Optimising for Performance</a>\n  • <a href=\"#styled-and-unstyled-entries\">Style Entries</a>\n  • <a href=\"#props-and-precedence\">Props</a>\n  • <a href=\"#optional-vs-code-previews\">VS Code Extension</a>\n  • <a href=\"https://github.com/bradleyhodges/sfsymbols-react/issues\">Issues</a>\n  • <a href=\"https://github.com/bradleyhodges/sfsymbols-react/pulls\">Pull Requests</a>\n</p>\n</div>\n\n> [!CAUTION]\n> SF Symbols is licensed by Apple for use only on Apple platforms. **Use of this package, or any of the other @bradleyhodges/sfsymbols-\\* packages, outside of Apple platforms is NOT permitted.**\n\n## Available Icons\n<a href=\"https://github.com/bradleyhodges/sfsymbols\">@bradleyhodges/sfsymbols</a> contains 8,111 icons, which includes 609 supplementary brand icons. All 7,502 of the `Regular` weight icons from the [San Francisco font](https://github.com/bradleyhodges/SFWindows) are included. Other weights and variable icon directives are not included in this package, but the icon weights can be made heavier by applying a stroke to the vector paths.\n\nFor simplicity, **I've created a basic icon browser for this package, which you can access here: [bradleyhodges-sfsymbols.vercel.app](https://bradleyhodges-sfsymbols.vercel.app)**\n[![Screenshot of a comment on a GitHub issue showing an image, added in the Markdown, of an Octocat smiling and raising a tentacle.](https://github.com/bradleyhodges/sfsymbols/blob/main/assets/icon-browser-screenshot.png?raw=true)](https://bradleyhodges-sfsymbols.vercel.app)\n\n## 🚀 Getting Started\n\nThis package contains the React components and metadata helpers that allow you to use these icons in your React/Next.js project. The actual icons and icon data for SF Symbols 8 come from the [`sfsymbols` package](https://www.npmjs.com/package/@bradleyhodges/sfsymbols), which you'll need to install as well.\n\n### Install the Packages\n\nYou will need to install the following packages to use the icons in your project:\n\n- [`@bradleyhodges/sfsymbols`](https://www.npmjs.com/package/@bradleyhodges/sfsymbols) – Icon catalogue package (contains the actual icons).\n- [`@bradleyhodges/sfsymbols-react`](https://www.npmjs.com/package/@bradleyhodges/sfsymbols-react) – React component wrapper for the using the icons in React/Next.js.\n\n```bash\npnpm add @bradleyhodges/sfsymbols @bradleyhodges/sfsymbols-react\n```\n\nThe component wrapper renders web DOM `<svg>` elements. **React Native applications need a native SVG renderer** instead. This library supports React 18 and 19.\n\n## Usage\n\nIt's dead simple to get going. Once you've installed the above packages, you can simply import and use them:\n\n```tsx\nimport SFIcon from \"@bradleyhodges/sfsymbols-react\";\nimport { sfArrowUpCircleFill, sfCheckmark, sfCrossVialFill } from \"@bradleyhodges/sfsymbols\";\n\nfunction MyComponent() {\n    return (\n        <div>\n            <SFIcon icon={sfArrowUpCircleFill} />\n            <SFIcon icon={sfCheckmark} weight={2} />\n            <SFIcon icon={sfCrossVialFill} size={24} className=\"text-red-500\" />\n        </div>\n    );\n}\n```\n\nUse the [icon browser](https://bradleyhodges-sfsymbols.vercel.app) to find icons you want to use.\n\n### Optimising for performance\n\nThe `default` and `SFIcon` exports are the same memoized, ref-forwarding component. For an opt-in direct icon import, use the exact `sf*` leaf path. This lets a bundler avoid parsing the catalogue's large root barrel:\n\n```tsx\nimport { SFIcon } from \"@bradleyhodges/sfsymbols-react\";\nimport { sfArrowUpCircleFill } from \"@bradleyhodges/sfsymbols/sfArrowUpCircleFill\";\n\n<SFIcon icon={sfArrowUpCircleFill} size={24} color=\"rebeccapurple\" />;\n```\n\nDo not build an application registry that imports every icon merely to support runtime lookup. Import the icons used by the application, or load bounded groups on demand.\n\n## Styled and unstyled entries\n\nThe root entry merges these compatibility classes with `className` by using the [`cn engine`](https://github.com/shadcn-ui/cn) with a default base class set: `inline-block align-middle overflow-visible text-current box-content h-[1em] -leading-[0.125em]`. The default `h-[1em]` class is omitted when `size` or a native `height` is supplied, and caller sizing utilities win class conflicts.\n\nThe unstyled entry renders the same SVG, paths, accessibility markup, ref, and events without importing `cn` or adding classes:\n\n```tsx\nimport SFIcon from \"@bradleyhodges/sfsymbols-react/unstyled\";\n\n<SFIcon icon={sfArrowUpCircleFill} className=\"icon\" />;\n```\n\nUse the root entry for the established layout behavior. Use `/unstyled` when the application owns all SVG layout and wants the smaller boundary.\n\n## Props and precedence\n\n`SFIcon` accepts ordinary `React.SVGProps<SVGSVGElement>` plus the following props:\n\n| Prop | Type | Behavior |\n| --- | --- | --- |\n| `icon` | `IconDefinition` | Required icon geometry and metadata. |\n| `size` | `number \\| string \\| null` | Sets both dimensions unless a native dimension overrides it. Explicit `0` is preserved. |\n| `width`, `height` | native SVG values | Override `size` independently. |\n| `color` | CSS color | Overrides each path's source fill. |\n| `weight` | `number \\| null` | Adds root fill, stroke, stroke width and round joins. It is a stroke effect, not selection of Apple's native SF Symbols weights. |\n| `fillOpacity` | `string \\| number \\| null` | Overrides source path opacity. With `weight`, the legacy default is `1`. |\n| `preservePathOpacity` | `boolean` | Keeps source opacity when `weight` is set and `fillOpacity` is absent. |\n| `className`, `style` | native SVG values | Apply to the SVG. The styled entry merges classes; ordinary CSS cascade and inline-style rules still apply. |\n| `title` | `string` | Renders `<title>` and generates its linked ID. |\n| `description` | `string` | Renders `<desc>` and generates its linked ID. A description alone does not name an image; also supply `title`, `aria-label`, or an external accessible name. |\n| `titleId`, `descriptionId` | `string` | Replace the generated ID for the corresponding element. They have no effect when that element is absent. |\n| `svgChildren` | `ReactNode` | Inserts SVG content such as `defs` before the icon paths. Legacy `children` remain ignored. |\n| `pathProps` | path props or `(path, index) => path props` | Applies safe per-path presentation and event props after generated fill and opacity. |\n\nDimension precedence is native `width` or `height`, then `size`, then the icon's positive width, then its positive height, then `1em`. The definition fallback is deliberately square for compatibility. A zero definition dimension is not used as the fallback, while an explicit `size={0}`, `width={0}`, or `height={0}` remains zero.\n\nPath fill precedence is `pathProps.fill`, `color`, source fill, then `currentColor`. Path opacity precedence is `pathProps.fillOpacity`, explicit `fillOpacity`, the legacy `weight` default unless `preservePathOpacity` is true, then source opacity. `pathProps.style` follows ordinary React style precedence. Geometry and child ownership stay with the renderer: `d`, `key`, `ref`, `children`, and `dangerouslySetInnerHTML` are excluded by the public type and filtered at runtime.\n\nNative SVG props, including refs and event handlers, are forwarded. Explicit `role`, `aria-hidden`, `aria-label`, `aria-labelledby`, and `aria-describedby` override generated accessibility attributes. When `title` and `aria-label` are both present, the title's generated `aria-labelledby` takes naming precedence; explicitly override `aria-labelledby`, including with `aria-labelledby={undefined}`, when `aria-label` should supply the name. Without an accessible name the SVG is hidden; a title, `aria-label`, or external `aria-labelledby` makes it visible to accessibility APIs. Generated IDs are unique, stable across title removal and restoration, and can be replaced with deterministic IDs when server output needs them.\n\n```tsx\nconst iconRef = React.createRef<SVGSVGElement>();\n\n<SFIcon\n    ref={iconRef}\n    icon={sfArrowUpCircleFill}\n    title=\"Upload\"\n    description=\"Moves the selected item upward\"\n    svgChildren={\n        <defs>\n            <linearGradient id=\"upload-gradient\">...</linearGradient>\n        </defs>\n    }\n    pathProps={(path, index) => ({\n        fill: index === 0 ? \"url(#upload-gradient)\" : path.fill,\n    })}\n/>\n```\n\nPlain serializable props and SVG children can render through React Server Components. Functions such as `pathProps` callbacks and event handlers must be introduced on the client side under the application's normal Server/Client boundary; the package does not add a `use client` directive.\n\n## Metadata helpers and types\n\nThe root and `/metadata` entries export `getIconKeywords` and `getIconVariants`. Both validate legacy catalogue shapes without mutating them, ignore inherited properties and accessors, preserve source order, and return frozen copies.\n\n```ts\nimport {\n    getIconKeywords,\n    getIconVariants,\n} from \"@bradleyhodges/sfsymbols-react/metadata\";\n\nconst keywords = getIconKeywords(sfArrowUpCircleFill);\nconst variants = getIconVariants<\"custom\">(sfArrowUpCircleFill);\n```\n\nKeyword arrays retain valid `text`, `generic`, and finite `priority` fields. Legacy string dictionaries become `{ text }` entries without invented metadata. Variant maps retain own string values and use a null prototype, so arbitrary absent custom names such as `toString` safely resolve to `undefined`. Convert with `{ ...variants }` when an API specifically requires an ordinary object prototype.\n\nReact Server Component props are one such boundary because React's serializable object form requires an ordinary object prototype:\n\n```tsx\n<ClientComponent variants={{ ...getIconVariants(icon) }} />\n```\n\nPublic types are available from the root, `/unstyled`, and the type-only `/types` entry: `IconDefinition`, `SFIconProps`, `SFIconPathProps`, `SFIconPath`, `SFIconKeyword`, and `SFIconVariant`. The additive `SFIconProps` type keeps the companion package's legacy contract intact.\n\n## Optional VS Code previews\n\nThe separate extension in [`extensions/vscode`](./extensions/vscode/README.md) provides local hover previews and **SF Symbols: Preview and Import Icon**. It parses installed icon leaves as bounded static data and inserts exact per-icon imports; it is not an application dependency and does not ship an icon registry.\n\nTo build a local VSIX without installing or publishing it:\n\n```bash\ncd extensions/vscode\npnpm install --frozen-lockfile\npnpm test\npnpm typecheck\npnpm package\n```\n\nThen choose **Extensions: Install from VSIX…** in VS Code and select `artifacts/sfsymbols-preview-0.1.0.vsix`. See the extension README for supported syntax, security boundaries, limits, corpus checks, and the isolated extension-host workflow.\n","readmeFilename":"README.md"}