{"_id":"@bento/use-svg-sprite","_rev":"4-6086f0a5bb6a3f684334301b463db43c","name":"@bento/use-svg-sprite","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@bento/use-svg-sprite","version":"0.1.0","keywords":["bento","component","library","react","sprite","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/use-svg-sprite@0.1.0","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"73f592c55b821e6b6d5ca8cd0b7480b444266f33","tarball":"https://registry.npmjs.org/@bento/use-svg-sprite/-/use-svg-sprite-0.1.0.tgz","fileCount":10,"integrity":"sha512-tG38UvuH2XhaBLLUX0xgMfeDKpK0SeQVCdkzWLybXGCfpk/3Ald26tdnaQm7bP67GgVbeAx3+Aki1w/X095PXg==","signatures":[{"sig":"MEUCIQC5GMdS/5aGuaqbH6z0o1SDqueYNbudjaDXbBVTtYn64AIgNDA9bIdlF6a+cKdY1aIYLwpfzxszsq50xbBLnv4c6lk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fuse-svg-sprite@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":26442},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"8cf6c3e7e24572c8b548fc4207e3af58bc3b5cc1","scripts":{"dev":"tsup-node src/index.tsx --watch","lint":"biome lint && tsc","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"10.9.2","description":"A React hook for managing SVG sprites","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/box":"^0.1.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"@bento/environment":"^0.1.0"},"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/use-svg-sprite_0.1.0_1761318932813_0.8909826249454671","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bento/use-svg-sprite","version":"0.1.1","keywords":["bento","component","library","react","sprite","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/use-svg-sprite@0.1.1","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"2ea4d333ff95cbf4883835e2532444d46d7c0d61","tarball":"https://registry.npmjs.org/@bento/use-svg-sprite/-/use-svg-sprite-0.1.1.tgz","fileCount":11,"integrity":"sha512-d3N826ACfWtsK7SCCcA76fmAl+Dk6Qo/bPa6Ngfv1vFCDVF4upVqpyHHlxSNT3n0PAubrdq2B7gi+nXbiMyHxA==","signatures":[{"sig":"MEQCIA459UETpRganw/3x98Q7P4RorqBSH5LzpNAG4ge2P10AiBirKZxu1+b67tFj0mEaBNdzUtDVdsnZQfkULDjBtTNuA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fuse-svg-sprite@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":29312},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"b630e17d1fad413043801e80ed1c1a0c5fe1d4b3","scripts":{"dev":"tsup-node src/index.tsx --watch","lint":"biome lint && tsc","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.2","description":"A React hook for managing SVG sprites","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/box":"^0.1.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"@bento/environment":"^0.1.2"},"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/use-svg-sprite_0.1.1_1762462137815_0.8162246818365948","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bento/use-svg-sprite","version":"0.1.2","keywords":["bento","component","library","react","sprite","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/use-svg-sprite@0.1.2","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"898a055cd454e68509669470f9546d3d8ecc1f24","tarball":"https://registry.npmjs.org/@bento/use-svg-sprite/-/use-svg-sprite-0.1.2.tgz","fileCount":11,"integrity":"sha512-rPn7TCOIaXvYUFPoEIIQy+7mrLPUP/MOmVW3CxQPBb96pD3J3issFVC2FPOj0557I0jByN/Mp++sN7Wm8vn4tg==","signatures":[{"sig":"MEQCIBx5ur9ucoE68nO9nFtVZ90afCXp3hz7ITvoDQecGzm4AiAo/rG1cOPNxFgh8l8XEmviubJrcI4ZgQoHtXvbl8Jp1w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fuse-svg-sprite@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":29312},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"2552a8442bd7e504706233eeb501001087058cdf","scripts":{"dev":"tsup-node src/index.tsx --watch","lint":"biome lint && tsc","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.4","description":"A React hook for managing SVG sprites","directories":{},"_nodeVersion":"23.11.1","dependencies":{"@bento/box":"^0.2.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"@bento/environment":"^0.1.3"},"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/use-svg-sprite_0.1.2_1764862976689_0.9850970651714916","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-24T15:15:32.736Z","modified":"2025-12-18T16:37:50.324Z","0.1.0":"2025-10-24T15:15:33.005Z","0.1.1":"2025-11-06T20:48:57.999Z","0.1.2":"2025-12-04T15:42:56.821Z"},"bugs":{"url":"https://github.com/godaddy/bento/issues"},"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","homepage":"https://github.com/godaddy/bento#readme","keywords":["bento","component","library","react","sprite","svg","vector"],"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"description":"A React hook for managing SVG sprites","maintainers":[{"email":"rmarkins@godaddy.com","name":"rmarkins"},{"email":"npmjs@3rd-Eden.com","name":"3rdeden"},{"email":"rmarkins@gmail.com","name":"rxmarbles"},{"email":"ekbader@gmail.com","name":"kawikabader"}],"readme":"# use-svg-sprite\n\nThe `@bento/use-svg-sprite` package provides a hook that registers inline\nSVG illustrations into a shared sprite sheet and returns a reusable component.\nThis makes it easy to keep your icons consistent and efficient across the app.\n\n> This approach ensures your icons are only defined once in the DOM and reused\n> efficiently across your app, improving performance and maintainability.\n\n## Installation\n\n```shell\nnpm install --save @bento/use-svg-sprite\n```\n\n## useSVGSprite\n\nThe package exposes a `useSVGSprite` hook that creates a new symbol element\nfor the provided illustration and adds it to the sprite sheet.\nThe hook returns a React element that references the newly added symbol.\n\n### Basic Usage\n\n```tsx\nimport { useSVGSprite } from '@bento/use-svg-sprite';\n/* v8 ignore next */\nimport React from 'react';\n\nexport function BasicUsage() {\n  const Icon = useSVGSprite(\n    'check',\n    <svg viewBox=\"0 0 24 24\" width={24} height={24}>\n      <path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n    </svg>\n  );\n\n  return <div>{Icon}</div>;\n}\n```\n\nAs seen from the example above, the `useSVGSprite` hook takes two arguments:\n\nIt returns a React element that renders an `<svg>` with a `<use>`\nthat references a symbol injected into a shared sprite sheet.\n\n### Multiple Icons Example\n\nYou can define and render multiple icons with different names.\n\n```tsx\nimport { useSVGSprite } from '@bento/use-svg-sprite';\n/* v8 ignore next */\nimport React from 'react';\n\nexport function MultipleIcons() {\n  const Check = useSVGSprite(\n    'check',\n    <svg viewBox=\"0 0 24 24\" width={24} height={24}>\n      <path d=\"M5 13l4 4L19 7\" stroke=\"green\" strokeWidth=\"2\" fill=\"none\" />\n    </svg>\n  );\n\n  const Alert = useSVGSprite(\n    'alert',\n    <svg viewBox=\"0 0 24 24\" width={24} height={24}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"red\" strokeWidth=\"2\" fill=\"none\" />\n      <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" stroke=\"red\" strokeWidth=\"2\" />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"red\" />\n    </svg>\n  );\n\n  return (\n    <div>\n      {Check}\n      {Alert}\n    </div>\n  );\n}\n```\n\nWhen using SVG icons with `useSVGSprite`, three attributes are crucial for optimal \nperformance and visual consistency:\n\n`viewBox`: This attribute defines the coordinate system and aspect ratio of your \nSVG. It ensures your icon scales correctly and maintains its proportions when \nresized. Without a proper `viewBox`, icons might appear distorted or incorrectly \npositioned.\n\n`width` and `height`: These attributes are essential for preventing layout shifts \nduring page load. By specifying these dimensions, the browser can reserve the \ncorrect amount of space for the icon before it's fully rendered. This improves \nthe Cumulative Layout Shift (CLS) metric and overall user experience.","readmeFilename":"README.md"}