{"_id":"@artero/svgpack","_rev":"4-e8a1e0401a2dbfb64a5bfb9a0508a1b4","name":"@artero/svgpack","dist-tags":{"beta":"2.2.0-beta.0","latest":"2.2.2"},"versions":{"2.2.0-beta.0":{"name":"@artero/svgpack","version":"2.2.0-beta.0","keywords":["svg","css","variables","css-variables","scss","sass","icons","images","optimization","build-tool"],"author":{"name":"Javier Artero"},"license":"MIT","_id":"@artero/svgpack@2.2.0-beta.0","maintainers":[{"name":"javier-artero","email":"javier.artero@gmail.com"}],"homepage":"https://github.com/JavierArtero/svgpack#readme","bugs":{"url":"https://github.com/JavierArtero/svgpack/issues"},"bin":{"svgpack":"bin/svgpack"},"dist":{"shasum":"2ed1e3d30edc8cdfa0e2d6ba33ea52ab27ef6c8a","tarball":"https://registry.npmjs.org/@artero/svgpack/-/svgpack-2.2.0-beta.0.tgz","fileCount":98,"integrity":"sha512-85h7xGsd8/TcEchdjhOgplmjAhw3dQUUVxk4gUFZ+G094jPdaN1ibRGQcs9R7TDZhAwMfQqk38+A2blBx1fYFA==","signatures":[{"sig":"MEUCIEjHvhlOEIx58Te8g5YKvAe/nLVlYbGFMjgIHlclihN1AiEA3619jlPB5yBSCdrUh/Ka+9O675XPmFxL3QFh82YbZDg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422118},"main":"src/index.ts","types":"src/types.d.ts","engines":{"node":">=14.0.0"},"exports":{".":"./src/index.ts","./components":"./src/components/index.ts"},"gitHead":"399e7485d11f7c4e89b03d293ddb6143dc629021","scripts":{"docs":"cd docs && ./serve.sh","lint":"eslint src/","test":"jest","build":"tsc","prepare":"node -e \"if(process.env.npm_config_global !== 'true' && !process.env.CI) { try { require('husky').install() } catch(e) { /* husky not available */ } }\"","lint:fix":"eslint src/ --fix","test:build":"npm run build && npm run test","test:eslint":"eslint src/"},"_npmUser":{"name":"javier-artero","email":"javier.artero@gmail.com"},"repository":{"url":"git+ssh://git@github.com/JavierArtero/svgpack.git","type":"git"},"_npmVersion":"10.8.2","description":"Generate reusable CSS, Tailwind v4 and SASS tokens from SVG icons and assets.","directories":{},"lint-staged":{"*.{js,json}":["prettier --write","eslint --fix"]},"_nodeVersion":"20.20.0","dependencies":{"ora":"^5.4.1","svgo":"^3.0.2","globby":"^11.1.0","lodash":"^4.17.21","minimist":"^1.2.8","to-slug-case":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^8.0.3","eslint":"^8.56.0","ts-jest":"^29.1.0","prettier":"^3.1.1","typescript":"^5.0.0","@types/jest":"^29.5.0","lint-staged":"^15.2.0","@types/react":">=19.0.0","@babel/preset-env":"^7.28.3","@babel/preset-react":"^7.27.1","@babel/eslint-parser":"^7.23.3","jest-environment-jsdom":"^29.7.0"},"peerDependencies":{"react":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svgpack_2.2.0-beta.0_1771587797647_0.7446047166459251","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"@artero/svgpack","version":"2.2.0","keywords":["svg","css","variables","css-variables","scss","sass","icons","images","optimization","build-tool"],"author":{"name":"Javier Artero"},"license":"MIT","_id":"@artero/svgpack@2.2.0","maintainers":[{"name":"javier-artero","email":"javier.artero@gmail.com"}],"homepage":"https://github.com/JavierArtero/svgpack#readme","bugs":{"url":"https://github.com/JavierArtero/svgpack/issues"},"bin":{"svgpack":"bin/svgpack"},"dist":{"shasum":"428d897f698e2d2756a2d8ab864a6d3ef60f92df","tarball":"https://registry.npmjs.org/@artero/svgpack/-/svgpack-2.2.0.tgz","fileCount":98,"integrity":"sha512-7Am+atUgCG5KlzO7hFiF48BanOEjI0mD5R3PXDsssVGHxT8XxPJT2Z/odtpLS07IyxOdCwHoc29I0iD5KvyscA==","signatures":[{"sig":"MEQCIGMylKMqQBCsKo7gmnbt+5GGjxyIh1NIL6EljDGIe96qAiAy6oEwC05srV2t4UvYWj9OpXrOw0zlcYcB6LdXDkGMMQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422111},"main":"src/index.ts","types":"src/types.d.ts","engines":{"node":">=14.0.0"},"exports":{".":"./src/index.ts","./components":"./src/components/index.ts"},"gitHead":"fcda3a372031076653e0a49aab84db1dd198207c","scripts":{"docs":"cd docs && ./serve.sh","lint":"eslint src/","test":"jest","build":"tsc","prepare":"node -e \"if(process.env.npm_config_global !== 'true' && !process.env.CI) { try { require('husky').install() } catch(e) { /* husky not available */ } }\"","lint:fix":"eslint src/ --fix","test:build":"npm run build && npm run test","test:eslint":"eslint src/"},"_npmUser":{"name":"javier-artero","email":"javier.artero@gmail.com"},"repository":{"url":"git+ssh://git@github.com/JavierArtero/svgpack.git","type":"git"},"_npmVersion":"10.8.2","description":"Generate reusable CSS, Tailwind v4 and SASS tokens from SVG icons and assets.","directories":{},"lint-staged":{"*.{js,json}":["prettier --write","eslint --fix"]},"_nodeVersion":"20.20.0","dependencies":{"ora":"^5.4.1","svgo":"^3.0.2","globby":"^11.1.0","lodash":"^4.17.21","minimist":"^1.2.8","to-slug-case":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^8.0.3","eslint":"^8.56.0","ts-jest":"^29.1.0","prettier":"^3.1.1","typescript":"^5.0.0","@types/jest":"^29.5.0","lint-staged":"^15.2.0","@types/react":">=19.0.0","@babel/preset-env":"^7.28.3","@babel/preset-react":"^7.27.1","@babel/eslint-parser":"^7.23.3","jest-environment-jsdom":"^29.7.0"},"peerDependencies":{"react":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svgpack_2.2.0_1771591032457_0.055502879857840304","host":"s3://npm-registry-packages-npm-production"}},"2.2.1":{"name":"@artero/svgpack","version":"2.2.1","keywords":["svg","css","variables","css-variables","scss","sass","icons","images","optimization","build-tool"],"author":{"name":"Javier Artero"},"license":"MIT","_id":"@artero/svgpack@2.2.1","maintainers":[{"name":"javier-artero","email":"javier.artero@gmail.com"}],"homepage":"https://svgpack.javierartero.com/","bugs":{"url":"https://github.com/JavierArtero/svgpack/issues"},"bin":{"svgpack":"bin/svgpack"},"dist":{"shasum":"746cb08d30452134778cac85f0c65f20d4a4bf76","tarball":"https://registry.npmjs.org/@artero/svgpack/-/svgpack-2.2.1.tgz","fileCount":19,"integrity":"sha512-ZL0mDmnyN1KiEL+SmysazXarR19G3V3A+f3eE9leucGWdKC4+ERHsAideP5IKaqYtR6/9aiVbYXEc1XTc1H/KQ==","signatures":[{"sig":"MEUCIQCxNYM9vx8iOYdzgk8GwyIndv6dKcZ//oR2HlrJUglwhwIgSc+AmtDdq5iK+gxj9YHkI/foVelzs06cipS4zL4vgRw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24428},"main":"src/index.ts","types":"src/types.d.ts","engines":{"node":">=14.0.0"},"exports":{".":"./src/index.ts","./components":"./src/components/index.ts"},"gitHead":"16654d60ca10065c32b8cf81354090b1171ebd29","scripts":{"docs":"cd docs && ./serve.sh","lint":"eslint src/","test":"jest","build":"tsc","prepare":"node -e \"if(process.env.npm_config_global !== 'true' && !process.env.CI) { try { require('husky').install() } catch(e) { /* husky not available */ } }\"","lint:fix":"eslint src/ --fix","test:build":"npm run build && npm run test","test:eslint":"eslint src/"},"_npmUser":{"name":"javier-artero","email":"javier.artero@gmail.com"},"repository":{"url":"git+https://github.com/JavierArtero/svgpack.git","type":"git"},"_npmVersion":"10.8.2","description":"Generate reusable CSS, Tailwind v4 and SASS tokens from SVG icons and assets.","directories":{},"lint-staged":{"*.{js,json}":["prettier --write","eslint --fix"]},"_nodeVersion":"20.20.0","dependencies":{"ora":"^5.4.1","svgo":"^3.0.2","globby":"^11.1.0","lodash":"^4.17.21","minimist":"^1.2.8","to-slug-case":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^8.0.3","eslint":"^8.56.0","ts-jest":"^29.1.0","prettier":"^3.1.1","typescript":"^5.0.0","@types/jest":"^29.5.0","lint-staged":"^15.2.0","@types/react":">=19.0.0","@babel/preset-env":"^7.28.3","@babel/preset-react":"^7.27.1","@babel/eslint-parser":"^7.23.3","jest-environment-jsdom":"^29.7.0"},"peerDependencies":{"react":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svgpack_2.2.1_1771872829502_0.807126233000246","host":"s3://npm-registry-packages-npm-production"}},"2.2.2":{"_id":"@artero/svgpack@2.2.2","bin":{"svgpack":"bin/svgpack"},"bugs":{"url":"https://github.com/JavierArtero/svgpack/issues"},"dist":{"shasum":"142a9abc2272a90e050e9b0b1c900c000d99ae3c","tarball":"https://registry.npmjs.org/@artero/svgpack/-/svgpack-2.2.2.tgz","fileCount":19,"integrity":"sha512-TBCl3A4/WmTt7pipAhsDU/H7zRy2kx6A0riJZ4FiFDlt4NfVAcTi+TF9R2usRKgcbcPE+siG28j0qhf3BuNS6Q==","signatures":[{"sig":"MEUCIAw2U3mjl21pmdII4ooTxZAYZGaC+GRH4BvAvVTEh2/YAiEAy0blA9YuK7N+Xdq7JsQWULRseqQZMu7x5TVAormn8V0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCd8Qz8ZxWCC51o/syZidnl5+oVQbgDCyFatai4img7xAIgYwbcOMCd7d/EOsiF7CPFN9DZH+rbom8sRqL+WUlJPL8="}],"unpackedSize":24568},"main":"src/index.ts","name":"@artero/svgpack","_from":"file:artero-svgpack-2.2.2.tgz","types":"src/types.d.ts","author":{"name":"Javier Artero"},"engines":{"node":">=14.0.0"},"exports":{".":"./src/index.ts","./components":"./src/components/index.ts"},"license":"MIT","scripts":{"docs":"cd docs && ./serve.sh","lint":"eslint src/","test":"jest","build":"tsc","prepare":"node -e \"if(process.env.npm_config_global !== 'true' && !process.env.CI) { try { require('husky').install() } catch(e) { /* husky not available */ } }\"","lint:fix":"eslint src/ --fix","test:build":"npm run build && npm run test","test:eslint":"eslint src/"},"version":"2.2.2","_npmUser":{"name":"javier-artero","email":"javier.artero@gmail.com"},"homepage":"https://svgpack.javierartero.com/","keywords":["svg","svg-to-css","css","variables","css-variables","scss","sass","tailwind","tailwindcss","tailwind-v4","icons","images","design-tokens","react","optimization","build-tool"],"_resolved":"/Users/javier.artero/Library/Mobile Documents/com~apple~CloudDocs/WORK/svgpack/artero-svgpack-2.2.2.tgz","_integrity":"sha512-TBCl3A4/WmTt7pipAhsDU/H7zRy2kx6A0riJZ4FiFDlt4NfVAcTi+TF9R2usRKgcbcPE+siG28j0qhf3BuNS6Q==","repository":{"url":"git+https://github.com/JavierArtero/svgpack.git","type":"git"},"_npmVersion":"10.8.2","description":"Convert SVG icons into reusable CSS variables, Tailwind v4 tokens, Sass functions, and React-friendly utilities.","directories":{},"lint-staged":{"*.{js,json}":["prettier --write","eslint --fix"]},"maintainers":[{"name":"javier-artero","email":"javier.artero@gmail.com"}],"_nodeVersion":"20.20.0","dependencies":{"ora":"^5.4.1","svgo":"^3.3.5","globby":"^11.1.0","lodash":"^4.18.1","minimist":"^1.2.8","to-slug-case":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^8.0.3","eslint":"^8.56.0","ts-jest":"^29.1.0","prettier":"^3.1.1","typescript":"^5.0.0","@types/jest":"^29.5.0","lint-staged":"^15.2.0","@types/react":">=19.0.0","@babel/preset-env":"^7.28.3","@babel/preset-react":"^7.27.1","@babel/eslint-parser":"^7.23.3","jest-environment-jsdom":"^29.7.0"},"peerDependencies":{"react":">=19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svgpack_2.2.2_1789980943782_0.6156371278514945"}}},"time":{"created":"2026-02-20T11:43:17.564Z","modified":"2026-09-21T08:55:44.137Z","2.2.0-beta.0":"2026-02-20T11:43:17.803Z","2.2.0":"2026-02-20T12:37:12.681Z","2.2.1":"2026-02-23T18:53:49.660Z","2.2.2":"2026-09-21T08:55:43.872Z"},"bugs":{"url":"https://github.com/JavierArtero/svgpack/issues"},"author":{"name":"Javier Artero"},"license":"MIT","homepage":"https://svgpack.javierartero.com/","keywords":["svg","svg-to-css","css","variables","css-variables","scss","sass","tailwind","tailwindcss","tailwind-v4","icons","images","design-tokens","react","optimization","build-tool"],"repository":{"url":"git+https://github.com/JavierArtero/svgpack.git","type":"git"},"description":"Convert SVG icons into reusable CSS variables, Tailwind v4 tokens, Sass functions, and React-friendly utilities.","maintainers":[{"name":"javier-artero","email":"javier.artero@gmail.com"}],"readme":"# [![svgpack](https://raw.githubusercontent.com/javierartero/svgpack/main/docs/svgpack-logo.svg)](https://svgpack.javierartero.com)\n\n[![npm](https://img.shields.io/npm/v/@artero/svgpack.svg?style=flat-square)](https://www.npmjs.com/package/@artero/svgpack)\n\n## Documentation\n\n📖 **[View Full Documentation](https://svgpack.javierartero.com)**\n\n`svgpack` converts SVG files into CSS variables and ready-to-use classes.\n\nIt optimizes and sanitizes SVGs and generates CSS variables for direct use, plus optional CSS classes for easy implementation. Perfect for modern web development with frameworks like Angular, NextJS, and vanilla CSS.\n\n**Why CSS Variables instead of inline SVG?**\n\nInlining SVG directly into your HTML duplicates markup across pages and components.  \nsvgpack converts SVG assets into CSS variables that:\n\n- **Avoid duplicated markup**: SVG definitions live in CSS, not repeated in every component.\n- **Are cached once**: The stylesheet is cached by the browser.\n- **Keep HTML cleaner**: No large inline `<svg>` blocks in your templates.\n- **Encourage reuse**: The same asset can be used consistently across the application.\n- **Simplify updates**: Update the SVG once and the change propagates everywhere.\n\n**Additional Advantages:**\n\n- Reduced HTML size and duplication\n- Centralized asset management\n- Native CSS custom properties (no runtime required)\n- Ready-to-use utility classes\n- Works seamlessly with modern frameworks (React, Vue, Angular)\n- Optional Tailwind v4 native integration\n\n## Table of Contents\n\n- [Quick Start](https://svgpack.javierartero.com/quick-start/)\n- [CLI Usage](https://svgpack.javierartero.com/cli-usage/)\n- [CSS Variables Usage](https://svgpack.javierartero.com/css-variables/)\n- [Tailwind v4](https://svgpack.javierartero.com/tailwind-v4/)\n- [SCSS Functions](https://svgpack.javierartero.com/scss-functions/)\n- [React Components](https://svgpack.javierartero.com/react-components/)\n- [Installation](https://svgpack.javierartero.com/installation/)\n\n## Quick Start\n\n### Install as Project Dependency (Recommended)\n\n```bash\nnpm install -D @artero/svgpack\n```\n\n⚠️ **Previously published as @marsbased/svgpack.** The old package is deprecated and will no longer receive updates.\n\n### CLI Usage\n\n```bash\n# Basic usage - generate CSS variables\nsvgpack my-images/ > images.css\n\n# With ready-to-use classes\nsvgpack my-images/ --background --mask > images.css\n\n# SCSS functions instead of CSS variables\nsvgpack my-images/ --sass > images.scss\n\n# Tailwind v4 native output\nsvgpack my-images/ --tailwind > theme.css\n\n# Get help\nsvgpack --help\n```\n\n## Credits\n\nOriginally developed at [MarsBased](https://github.com/orgs/MarsBased) by [Danigb](https://github.com/danigb) and [Javier Artero](https://github.com/javierartero).\nNow maintained independently.\n\n## License\n\nMIT License","readmeFilename":"README.md"}