{"_id":"svg-sprite-pack","_rev":"3-160804ee8697b88a4c4e883b12f57047","name":"svg-sprite-pack","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"svg-sprite-pack","version":"1.0.0","keywords":["svg","sprite","icon","pack"],"author":"","license":"MIT","_id":"svg-sprite-pack@1.0.0","maintainers":[{"name":"songsterr_ci","email":"hq@songsterr.com"}],"homepage":"https://github.com/songsterr/svg-sprite-pack#readme","bugs":{"url":"https://github.com/songsterr/svg-sprite-pack/issues"},"bin":{"svg-sprite-pack":"src/cli.js"},"dist":{"shasum":"cdd481c5a0d8d5609d0de80924f6a2c516d93f98","tarball":"https://registry.npmjs.org/svg-sprite-pack/-/svg-sprite-pack-1.0.0.tgz","fileCount":11,"integrity":"sha512-Nf/EjxrB1I9TogJsfvdQ1gpydVlhE5XvK3Pr09B261RKlehIX/7ld8aBNZ4Yh7nZxH/GOu9tQoUeUIOhOql5pA==","signatures":[{"sig":"MEUCIAYZfVc5Rjrh+9HFskI43zQKf4171jUKRilt2Vd3UQAXAiEAqDKmS3bw+/pwuq4LmVtQeovM3fs8RSTc8oOpMH1+nNk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11565},"main":"src/index.js","type":"module","engines":{"node":">=18.0.0"},"gitHead":"d77efdd1fc31473a7c9c3e08a833ecbbb8867367","scripts":{"test":"node --test test/"},"_npmUser":{"name":"songsterr_ci","email":"hq@songsterr.com"},"repository":{"url":"git+https://github.com/songsterr/svg-sprite-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"Pure JavaScript SVG sprite generator","directories":{},"_nodeVersion":"20.19.4","dependencies":{"svgo":"^3.3.2","@xmldom/xmldom":"^0.9.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"semantic-release":"^24.0.0","@semantic-release/git":"^10.0.1","@semantic-release/changelog":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/svg-sprite-pack_1.0.0_1753364392299_0.1568976915534106","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"svg-sprite-pack","version":"1.0.1","keywords":["svg","sprite","icon","pack"],"author":"","license":"MIT","_id":"svg-sprite-pack@1.0.1","maintainers":[{"name":"songsterr_ci","email":"hq@songsterr.com"}],"homepage":"https://github.com/songsterr/svg-sprite-pack#readme","bugs":{"url":"https://github.com/songsterr/svg-sprite-pack/issues"},"bin":{"svg-sprite-pack":"src/cli.js"},"dist":{"shasum":"d76b644fece6b294e2e401bf90fd0405d8b7cf7f","tarball":"https://registry.npmjs.org/svg-sprite-pack/-/svg-sprite-pack-1.0.1.tgz","fileCount":13,"integrity":"sha512-+nJexSWBDO8myE0/8XE0mieMAsgo6kT/sSsHuiZ3k7lJpsFZVV7NB0zomju112FSYKxSEPF0JJ4iM9AeNBtcYA==","signatures":[{"sig":"MEUCIAZKf9HQdPup/2cdX9uFyMrASnZzn/UNrsUzogBiU/4/AiEA63UMtnXl8YUxA5N99s0GL+o9w/G5ElGIfIWoK8oGGjc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15558},"main":"src/index.js","type":"module","engines":{"node":">=18.0.0"},"gitHead":"dbdef15adcc850d2455339a2b4448f06dc60deb4","scripts":{"test":"node --test test/index.test.js"},"_npmUser":{"name":"songsterr_ci","email":"hq@songsterr.com"},"repository":{"url":"git+https://github.com/songsterr/svg-sprite-pack.git","type":"git"},"_npmVersion":"10.9.3","description":"Pure JavaScript SVG sprite generator","directories":{},"_nodeVersion":"20.19.4","dependencies":{"svgo":"^3.3.2","@xmldom/xmldom":"^0.9.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"semantic-release":"^24.0.0","@semantic-release/git":"^10.0.1","@semantic-release/changelog":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/svg-sprite-pack_1.0.1_1753366343292_0.6005643129638989","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"svg-sprite-pack","version":"1.0.2","description":"Pure JavaScript SVG sprite generator","type":"module","main":"src/index.js","bin":{"svg-sprite-pack":"src/cli.js"},"scripts":{"test":"node --test test/index.test.js"},"keywords":["svg","sprite","icon","pack"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/songsterr/svg-sprite-pack.git"},"publishConfig":{"access":"public"},"dependencies":{"@xmldom/xmldom":"^0.9.6","svgo":"^3.3.2"},"engines":{"node":">=18.0.0"},"devDependencies":{"@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","semantic-release":"^24.0.0"},"_id":"svg-sprite-pack@1.0.2","gitHead":"7f579dac68dcbafe3da1b3d5511577498c5abeb4","bugs":{"url":"https://github.com/songsterr/svg-sprite-pack/issues"},"homepage":"https://github.com/songsterr/svg-sprite-pack#readme","_nodeVersion":"20.19.4","_npmVersion":"10.9.3","dist":{"integrity":"sha512-TPvTFNLNQOAYpkPH0F2TzM0kWuOpLVXgI3068Ni/Z56XpsJrdrvSjKG3JTfJ6Coqgc4iyfxrS0eGbpNxMUxHkg==","shasum":"8d0541a8afc810370689f40a3499e817eee7e151","tarball":"https://registry.npmjs.org/svg-sprite-pack/-/svg-sprite-pack-1.0.2.tgz","fileCount":13,"unpackedSize":15759,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD39x2x+jccwu60LynhazOl3iEIWpnyXEz2yQfz/+1IZgIgUZTKpbN2F80Jqm5FuJaN8KdhOMVo0SXIv7qphpl/oas="}]},"_npmUser":{"name":"songsterr_ci","email":"hq@songsterr.com"},"directories":{},"maintainers":[{"name":"songsterr_ci","email":"hq@songsterr.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svg-sprite-pack_1.0.2_1753367443234_0.8346265848084409"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-24T13:39:52.166Z","modified":"2025-07-24T14:30:43.598Z","1.0.0":"2025-07-24T13:39:52.465Z","1.0.1":"2025-07-24T14:12:23.505Z","1.0.2":"2025-07-24T14:30:43.401Z"},"bugs":{"url":"https://github.com/songsterr/svg-sprite-pack/issues"},"license":"MIT","homepage":"https://github.com/songsterr/svg-sprite-pack#readme","keywords":["svg","sprite","icon","pack"],"repository":{"type":"git","url":"git+https://github.com/songsterr/svg-sprite-pack.git"},"description":"Pure JavaScript SVG sprite generator","maintainers":[{"name":"songsterr_ci","email":"hq@songsterr.com"}],"readme":"# svg-sprite-pack\n\nA tool that combines multiple SVG files into a single sprite sheet. It generates SVG sprites with `<symbol>` elements that can be referenced using `<use>` tags.\n\n## Why use SVG sprites?\n\nSVG sprites with `<use>` allow CSS styling and adapting icons to light/dark themes. Bundling icons into sprites reduces request overhead even with HTTP/2. Cross-origin `<use>` references are blocked, so CDN hosting won't work for the sprite file.\n\n## Installation\n\n```bash\nnpx svg-sprite-pack <directory>\n```\n\n## How it works\n\nThe tool looks for directories named `sprite` in your project and transforms all the SVG files inside into a single optimized sprite sheet. Each icon becomes a `<symbol>` with an ID based on its filename. Style attributes like `fill` and `stroke` are stripped out so you can control everything with CSS. The final sprite is saved next to your component with a `-sprite.svg` suffix.\n\n## Quick start\n\nCreate a `sprite` directory next to your component and drop your SVG icons in there:\n\n```\nsrc/components/AppSwitch/\n├── sprite/\n│   ├── play.svg\n│   └── pause.svg\n├── AppSwitch.tsx\n└── AppSwitch.module.css\n```\n\nRun the tool:\n\n```bash\nnpx svg-sprite-pack src/components\n```\n\nYou'll get `AppSwitch-sprite.svg` next to your component. Use it in your code:\n\n```jsx\nimport sprite from './AppSwitch-sprite.svg?url';\n\n<svg width={24} height={24}>\n  <use xlinkHref={`${sprite}#play`} />\n</svg>\n```\n\nThe `?url` import syntax depends on your bundler — adjust as needed. The important part is getting a URL to your sprite file.\n\n## Features\n\nThe tool recursively searches for directories named `sprite` and generates optimized sprite files. It automatically converts filenames into slugified IDs (`my-icon.svg` becomes `#my-icon`) and applies SVGO optimization to minimize file size. No build configuration or native dependencies required — just Node.js 18 or later.","readmeFilename":"README.md"}