{"_id":"@al00x/svg-packer","_rev":"1-522a770a431d10c56730bbafc5f9aa24","name":"@al00x/svg-packer","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@al00x/svg-packer","author":{"name":"Al00X"},"description":"A Command-Line tool to Pack your SVG icons into a single file!","version":"1.0.0","license":"MIT","keywords":["al00x","svg","icon","svgs","icons","optimize","optimizer","cli","command-line","packer","pack","utility"],"bin":{"svg-packer":"src/index.js"},"repository":{"type":"git","url":"git+https://github.com/Al00X/svg-packer.git"},"publishConfig":{"access":"public"},"homepage":"https://github.com/Al00X/svg-packer#readme","private":false,"dependencies":{"tslib":"^2.3.0","commander":"^12.1.0","execa":"^9.1.0","fs-extra":"^11.2.0","glob":"^10.4.1","node-html-parser":"^6.1.13","chalk":"4.1.2"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","_id":"@al00x/svg-packer@1.0.0","gitHead":"da86a52136911e203dbecd1104639103eba7eb87","bugs":{"url":"https://github.com/Al00X/svg-packer/issues"},"_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-XWFre4essurJqQDzXCPzteALBaC1I/mIqDGMa+dc+aBKiQFzmJiS7ECIDgf4Nodj6yQDN7glkhS+MzP8ptIhSA==","shasum":"1c6847daa222b7c1648b7ec02d91b778c0d9100c","tarball":"https://registry.npmjs.org/@al00x/svg-packer/-/svg-packer-1.0.0.tgz","fileCount":11,"unpackedSize":19338,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICALBZZWCKNpy7Z0EsAaQRfdAnn7dEOmokXQZySBvkLRAiEA0zmz8E9HKIj1N9Inh0q0mvHJLvNqh+AVClAE9WEciJo="}]},"_npmUser":{"name":"al00x","email":"al00x@outlook.com"},"directories":{},"maintainers":[{"name":"al00x","email":"al00x@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-packer_1.0.0_1717417828264_0.10955654496185341"},"_hasShrinkwrap":false},"1.0.1":{"name":"@al00x/svg-packer","author":{"name":"Al00X"},"description":"A Command-Line tool to Pack your SVG icons into a single file!","version":"1.0.1","license":"MIT","keywords":["al00x","svg","icon","svgs","icons","optimize","optimizer","cli","command-line","packer","pack","utility"],"bin":{"svg-packer":"src/index.js"},"repository":{"type":"git","url":"git+https://github.com/Al00X/svg-packer.git"},"publishConfig":{"access":"public"},"homepage":"https://github.com/Al00X/svg-packer#readme","private":false,"dependencies":{"tslib":"^2.3.0","commander":"^12.1.0","execa":"^9.1.0","fs-extra":"^11.2.0","glob":"^10.4.1","node-html-parser":"^6.1.13","chalk":"4.1.2"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","_id":"@al00x/svg-packer@1.0.1","gitHead":"482de52ed50263b7ff8938a2563af9257d6dc79b","bugs":{"url":"https://github.com/Al00X/svg-packer/issues"},"_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-VgKjWTqlgvmW1vsz0rOL0QO6M43v4J273JD1FToPHm2Fq1ir7pPe+VE7uhOwWkfH9NRRavVIcOgN0mrlujfLhQ==","shasum":"815d3131d6c73f2851fd152b9997e0df8206bb29","tarball":"https://registry.npmjs.org/@al00x/svg-packer/-/svg-packer-1.0.1.tgz","fileCount":11,"unpackedSize":22601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClQX6lDNaFZ9TrkqSQ+c0Qpfec/DSse1P/P9TFqAwIXwIgN0+GnliMZ5DyPlP4R1EUQvUdb5cPa/cKaJBaFPFSYgA="}]},"_npmUser":{"name":"al00x","email":"al00x@outlook.com"},"directories":{},"maintainers":[{"name":"al00x","email":"al00x@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-packer_1.0.1_1717431078238_0.5469708449420216"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-03T12:30:28.135Z","1.0.0":"2024-06-03T12:30:28.465Z","modified":"2024-06-03T16:11:18.520Z","1.0.1":"2024-06-03T16:11:18.358Z"},"maintainers":[{"name":"al00x","email":"al00x@outlook.com"}],"description":"A Command-Line tool to Pack your SVG icons into a single file!","homepage":"https://github.com/Al00X/svg-packer#readme","keywords":["al00x","svg","icon","svgs","icons","optimize","optimizer","cli","command-line","packer","pack","utility"],"repository":{"type":"git","url":"git+https://github.com/Al00X/svg-packer.git"},"author":{"name":"Al00X"},"bugs":{"url":"https://github.com/Al00X/svg-packer/issues"},"license":"MIT","readme":"# @Al00X/SVG-Packer\r\n> 🗃️ _Pack all of your svg files into a single SVG file! (command-line tool)_\r\n\r\n___\r\n\r\n## So What's The Point Of This? 🧐❔\r\n\r\nBasically, the problem came up when we wanted to use svg icons in an SSR website, and cache them; well\r\nwe could have used a caching service and logics to handle things but that would take a lot of time\r\nto write a decent code; \r\nwhich consist of handling multiple requests or nasty race conditions that occurred.\r\n\r\nOr in React (and other frameworks using jsx) we tend to generate a jsx file for each svg and customize them.\r\n\r\nWhat if we want to add a `size` property to all the icons to controls the width and height simultaneously.\r\nor when we want to add a `disabled` and `onClick` event handlers.\r\n\r\n___\r\n\r\n## The Solution Is Here! ✨\r\n\r\nusing this package you can combine all of your svg files into a singular file, \r\neach icon is inside a symbol, which then can be used by its id, \r\nand is accessed easily from anywhere with **_Benefits_**:\r\n\r\n- Just **one** fetch request to get all the icons\r\n- It's **cached** on the browser\r\n- A **single** component to rule all the svg properties\r\n- **Type safe!** icon names are saved into a d.ts file\r\n- washes the dishes for you\r\n- it's nice... really.\r\n\r\n___\r\n\r\n## Getting Started 🚀\r\n\r\nInstall it using your preferred package manager:\r\n\r\n```shell\r\nnpm i @al00x/svg-packer\r\n```\r\n\r\nNow you can call it from your terminal:\r\n\r\n```shell\r\nnpx svg-packer\r\n```\r\n\r\ngather some SVGs and you are ready to go!\r\n\r\n___\r\n\r\n## How To Use It? 🔦\r\n\r\nThe simplest way to generate the *Packed SVG* is to give an input & output to start the process:\r\n\r\n```shell\r\nnpx svg-packer -i ./folder/to/svg/icons -o ./folder/to/output\r\n```\r\n\r\nAfter running this command you will get two files in the output:\r\n\r\n- `Packed-SVG.svg` contains all the svgs you pointed to.\r\n- `Packed-SVG-types.d.ts` contains all the icon names for type safety (extracted from the icons filename).\r\n\r\nYou are all set to use these files the way you like to;\r\nThe samples below are made for each framework to gives you a quick start!\r\n\r\n## Samples 📔\r\n\r\n___\r\n\r\n### Angular\r\n```typescript\r\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\nimport { IconNameType } from './svg-packed-names';\r\n\r\n@Component({\r\n  selector: 'icon',\r\n  template: `\r\n    <div\r\n      class=\"icon-wrapper\"\r\n    >\r\n      <svg style=\"fill: currentColor !important; color: inherit\" [style.width]=\"size\" [style.height]=\"size\">\r\n        <use [attr.href]=\"'/assets/svg-packed.svg#' + name\" />\r\n      </svg>\r\n    </div>\r\n  `,\r\n  styles: ``,\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class IconComponent {\r\n  @Input({ required: true }) name!: IconNameType;\r\n  @Input() size?: string = '1.5rem';\r\n}\r\n```\r\n\r\n___\r\n\r\n### Qwik\r\n```typescript\r\nimport iconsSprite from './svg-packed.svg';\r\nimport type { IconName } from './svg-packed-names';\r\nimport { component$ } from '@builder.io/qwik';\r\n\r\nexport default component$(\r\n  ({\r\n    name,\r\n    size = '1.5rem',\r\n    ...props\r\n  }: {\r\n    name: IconName;\r\n    size?: string;\r\n    class?: string;\r\n  }) => {\r\n    return (\r\n      <svg {...props} class={`${props.class ?? ''}`} style={{ width: size, height: size }}>\r\n        <use href={`${iconsSprite}#${name}`} />\r\n      </svg>\r\n    );\r\n  },\r\n);\r\n```\r\n\r\n___\r\n\r\n#### Issues & Contributes are welcomed! 💞\r\nIf you find a bug, got a fix, have an idea, made a new feature, or ... \r\nfeel free to send it right away!\r\n","readmeFilename":"README.md"}