{"_id":"@acronis-platform/icons-sprite","_rev":"2-05cd22ca3942f86d2752f30c6cd2ee7b","name":"@acronis-platform/icons-sprite","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@acronis-platform/icons-sprite","version":"0.2.0","keywords":["acronis","icons","sprite","svg","design-system"],"license":"MIT","_id":"@acronis-platform/icons-sprite@0.2.0","maintainers":[{"name":"acronis_platform","email":"team-rnd-tools-github@acronis.com"},{"name":"yusuf_s","email":"Yusuf.Shamir@acronis.com"}],"homepage":"https://github.com/acronis/uikit#readme","bugs":{"url":"https://github.com/acronis/uikit/issues"},"dist":{"shasum":"cd1887015cae6eb504c52bb652871c3ccfe4d259","tarball":"https://registry.npmjs.org/@acronis-platform/icons-sprite/-/icons-sprite-0.2.0.tgz","fileCount":6,"integrity":"sha512-pvXebvxGnYg/ZH5yjAJb9B8HrVBALPaufM3/61bUvQQ5v1mDM7a3pWdm+WYAXmiqa73yjCnCQvSVyDLzw14DDw==","signatures":[{"sig":"MEUCIGpgpBQBAwUjJlr6L6piigimMoSzljcMyt+dVKIewbQoAiEAnLYj6NGiTcZNvbCSnoWvR0eckaCj/NAvYpARWVonVaE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@acronis-platform%2ficons-sprite@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":3123547},"type":"module","_from":"file:acronis-platform-icons-sprite-0.2.0.tgz","exports":{"./package.json":"./package.json","./iconsprite.svg":"./sprites/iconsprite.svg","./iconsprite-mono.svg":"./sprites/iconsprite-mono.svg","./iconsprite-multi.svg":"./sprites/iconsprite-multi.svg"},"scripts":{"dev":"echo \"no dev (generated artifacts; run build)\" && exit 0","lint":"eslint .","test":"pnpm run build","build":"tsx scripts/generate-sprite.ts","clean":"echo \"no clean (generated sprites are committed; run build to regenerate)\" && exit 0","lint:fix":"eslint . --fix","typecheck":"tsc --noEmit","test:watch":"echo \"no watch mode (run test)\" && exit 0"},"_npmUser":{"name":"acronis_platform","email":"team-rnd-tools-github@acronis.com"},"_resolved":"/tmp/5f096495eaafa0d7e4ba28adf3b34de5/acronis-platform-icons-sprite-0.2.0.tgz","_integrity":"sha512-pvXebvxGnYg/ZH5yjAJb9B8HrVBALPaufM3/61bUvQQ5v1mDM7a3pWdm+WYAXmiqa73yjCnCQvSVyDLzw14DDw==","repository":{"url":"git+https://github.com/acronis/uikit.git","type":"git","directory":"packages/icons-sprite"},"_npmVersion":"10.9.8","description":"Optimized SVG sprites (combined / monocolor / multicolor) generated from @acronis-platform/icons-svg.","directories":{},"_nodeVersion":"22.22.3","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.0","svgo":"4.0.1","cheerio":"^1.0.0","typescript":"6.0.3","@types/node":"25.9.1","@acronis-platform/icons-svg":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/icons-sprite_0.2.0_1782199986241_0.7999325116763805","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-06-23T07:33:06.121Z","modified":"2026-09-01T15:47:15.026Z","0.2.0":"2026-06-23T07:33:06.462Z"},"bugs":{"url":"https://github.com/acronis/uikit/issues"},"license":"MIT","homepage":"https://github.com/acronis/uikit#readme","keywords":["acronis","icons","sprite","svg","design-system"],"repository":{"url":"git+https://github.com/acronis/uikit.git","type":"git","directory":"packages/icons-sprite"},"description":"Optimized SVG sprites (combined / monocolor / multicolor) generated from @acronis-platform/icons-svg.","maintainers":[{"email":"team-rnd-tools-github@acronis.com","name":"acronis_platform"}],"readme":"# @acronis-platform/icons-sprite\n\nOptimized SVG sprites generated from\n[`@acronis-platform/icons-svg`](../icons-svg). Three flavors are produced into\n`sprites/` and committed:\n\n| File                   | Contents                           | `<use>` id prefix |\n| ---------------------- | ---------------------------------- | ----------------- |\n| `iconsprite.svg`       | All icons (monocolor + multicolor) | `m-` / `c-`       |\n| `iconsprite-mono.svg`  | Monocolor icons only               | `m-`              |\n| `iconsprite-multi.svg` | Multicolor icons only              | `c-`              |\n\n- **Monocolor** symbols have their fills rewritten to `currentColor`, so they\n  inherit the CSS `color` of the element.\n- **Multicolor** symbols keep their original colors.\n- Symbol ids follow `\\<prefix>-\\<icon-name>--\\<size>`, e.g. `m-add--16`,\n  `c-status-ok--24`.\n\n## Usage\n\n### Inline `<use>`\n\n```html\n<!-- Reference a symbol from the external sprite file -->\n<svg class=\"icon\" style=\"color: #0073e6;\">\n  <use href=\"/path/to/iconsprite-mono.svg#m-add--16\" />\n</svg>\n```\n\n### Import the sprite URL (bundler)\n\n```ts\nimport monoSprite from '@acronis-platform/icons-sprite/iconsprite-mono.svg';\nimport multiSprite from '@acronis-platform/icons-sprite/iconsprite-multi.svg';\n\n// <use href={`${monoSprite}#m-add--16`} />\n```\n\n### React\n\n```tsx\nimport sprite from '@acronis-platform/icons-sprite/iconsprite.svg';\n\nexport function Icon({\n  id,\n  size = 24,\n  ...props\n}: {\n  id: string;\n  size?: number;\n}) {\n  return (\n    <svg width={size} height={size} {...props}>\n      <use href={`${sprite}#${id}`} />\n    </svg>\n  );\n}\n\n// <Icon id=\"m-add--16\" /> · <Icon id=\"c-status-ok--24\" />\n```\n\nA standalone browser demo lives in [`demo.html`](./demo.html) — open it directly\n(no build step) to browse and test icons.\n\n## Building\n\n```bash\npnpm --filter @acronis-platform/icons-sprite build\n```\n\n`scripts/generate-sprite.ts` reads `@acronis-platform/icons-svg`'s\n`monocolor-icons/` and `multicolor-icons/` sources, wraps each into a\n`<symbol>`, and SVGO-optimizes the result. The generated `sprites/*.svg` files are\n**committed**, so consumers don't need to build. Re-run the build whenever the\nupstream icons change (e.g. after an `icons-svg` Figma sync).\n\n## Accessibility\n\nGive meaningful icons a label, and hide decorative ones:\n\n```html\n<svg class=\"icon\" role=\"img\" aria-label=\"Add\"><use href=\"#m-add--16\" /></svg>\n<svg class=\"icon\" aria-hidden=\"true\"><use href=\"#m-add--16\" /></svg>\n```\n","readmeFilename":"README.md"}