{"id":39491530,"url":"https://github.com/firefoxic/gulp-stacksvg","last_synced_at":"2026-01-18T05:36:23.025Z","repository":{"id":58123999,"uuid":"529530577","full_name":"firefoxic/gulp-stacksvg","owner":"firefoxic","description":"Combine svg files into one with stack method","archived":false,"fork":false,"pushed_at":"2024-11-01T13:32:42.000Z","size":433,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-09T04:04:47.187Z","etag":null,"topics":["gulp-plugin","icon","sprite","stack","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gulp-stacksvg","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firefoxic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-27T08:46:03.000Z","updated_at":"2025-04-09T10:22:27.000Z","dependencies_parsed_at":"2024-06-21T19:19:05.830Z","dependency_job_id":"599207b2-8271-4526-834e-4648c0b320e5","html_url":"https://github.com/firefoxic/gulp-stacksvg","commit_stats":{"total_commits":101,"total_committers":2,"mean_commits":50.5,"dds":0.01980198019801982,"last_synced_commit":"25fe5e527f681c75cf1458cd5d2d2be3eec5e893"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/firefoxic/gulp-stacksvg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Fgulp-stacksvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Fgulp-stacksvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Fgulp-stacksvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Fgulp-stacksvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firefoxic","download_url":"https://codeload.github.com/firefoxic/gulp-stacksvg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefoxic%2Fgulp-stacksvg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp-plugin","icon","sprite","stack","svg"],"created_at":"2026-01-18T05:36:22.963Z","updated_at":"2026-01-18T05:36:23.013Z","avatar_url":"https://github.com/firefoxic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable MD007 --\u003e\n# gulp-stacksvg\n\n[![License: MIT][license-image]][license-url]\n[![Changelog][changelog-image]][changelog-url]\n[![NPM version][npm-image]][npm-url]\n[![Test Status][test-image]][test-url]\n\nThe gulp plugin to combine svg files into one using the stack method.\n\n## Installation\n\n```shell\npnpm add -D gulp gulp-stacksvg\n```\n\n## Usage\n\nAdd the following to your `gulpfile.js`:\n\n```js\nimport { stacksvg } from \"gulp-stacksvg\"\nimport { dest, src } from \"gulp\"\n\nexport function createStack () {\n\treturn src(`./src/shared/icons/**/*.svg`)\n\t\t.pipe(stacksvg())\n\t\t.pipe(dest(`./dist/shared/icons`))\n}\n```\n\nTo combine all icons from `./src/shared/icons/` into the `./dist/shared/icons/stack.svg` run:\n\n```shell\npnpm exec gulp createStack\n```\n\n## Why a stack?\n\nUnlike all other methods for assembling a sprite, the stack does not limit us in choosing how to insert a vector into a page. Take a look at [the results](https://demos.frontend-design.ru/sprite/src/) of different ways to display fragments of different types of sprites.\n\nWe can use the stack in all four possible ways:\n\n- in markup:\n\n\t- in `src` of `img` tag — static,\n\t- in the `href` of the `use` tag — with the possibility of repainting,\n\n- in styles:\n\n\t- in `url()` properties `background` — static,\n\t- in `url()` properties `mask` — with the possibility of repainting.\n\n[Demo page](https://firefoxic.github.io/gulp-stacksvg/example/) to prove it.\n\n## Stack under the hood\n\nThis method was first mentioned in a Simurai [article](https://simurai.com/blog/2012/04/02/svg-stacks) on April 2, 2012. But even it uses unnecessarily complex code transformations.\n\nThis can be done much easier. In general, the stack is arranged almost like a symbol sprite, but without changing the icon tag (it remains the `svg` tag, as in the original icon files) and with the addition of a tiny bit of style.\n\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n\n\t\u003cstyle\u003e:root svg:not(:target) { display: none }\u003c/style\u003e\n```\n\n\u003cimg align=\"left\" width=\"90\" height=\"90\" title=\"sun\" src=\"https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#sun-alpha\"\u003e\n\n```xml\n\u003csvg id=\"sun\" viewBox=\"0 0 24 24\"\u003e\n\t\u003c!-- Inner code of sun icon --\u003e\n\u003c/svg\u003e\n```\n\n\u003cimg align=\"left\" width=\"90\" height=\"90\" title=\"heart\" src=\"https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#heart-red\"\u003e\n\n```xml\n\u003csvg id=\"heart\" viewBox=\"0 0 24 24\"\u003e\n\t\u003c!-- Inner code of heart icon --\u003e\n\u003c/svg\u003e\n```\n\n\u003cimg align=\"left\" width=\"90\" height=\"90\" title=\"thumbup\" src=\"https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#thumbup-alpha\"\u003e\n\n```xml\n\u003csvg id=\"thumbup\" viewBox=\"0 0 24 24\"\u003e\n\t\u003c!-- Inner code of thumbup icon --\u003e\n\u003c/svg\u003e\n```\n\n```xml\n\u003c/svg\u003e\n```\n\nThe magic is in the stack inner style, which shows only the fragment requested by the link, hiding everything else:\n\n```css\n:root svg:not(:target) { display: none }\n```\n\nAnd now the icons from the external sprite are available in the styles \u003cimg width=\"16\" height=\"16\" title=\"heart\" src=\"https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/docs/example/stack.svg#heart-red\" alt=\"heart\"\u003e\n\n```html\n\u003cbutton class=\"button button--icon_heart\" type=\"button\"\u003e\n\t\u003cspan class=\"visually-hidden\"\u003eAdd to favorites\u003c/span\u003e\n\u003c/button\u003e\n```\n\n```css\n.button {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.5em;\n\n\t\u0026:hover {\n\t\t--fill: red;\n\t}\n\n\t\u0026::before {\n\t\tcontent: \"\";\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\t/* icon shape */\n\t\tmask: var(--icon) no-repeat center / contain;\n\t\t/* icon color */\n\t\tbackground: var(--fill, orangered);\n\t}\n\n\t\u0026:where(.button--icon_heart) {\n\t\t--icon: url(\"../icons/stack.svg#heart\");\n\t}\n}\n```\n\nFor an icon inserted via `mask`, simply change the `background`. Moreover, unlike `use`, you can draw anything in the background under the mask, for example, a gradient.\n\n## More info\n\n- [SVG sprites: old-school, modern, unknown, and forgotten](https://pepelsbey.dev/articles/svg-sprites/#forgotten-stacks) by [Vadim Makeev](https://mastodon.social/@pepelsbey)\n\n[license-url]: https://github.com/firefoxic/gulp-stacksvg/blob/main/LICENSE.md\n[license-image]: https://img.shields.io/badge/License-MIT-limegreen.svg\n\n[changelog-url]: https://github.com/firefoxic/gulp-stacksvg/blob/main/CHANGELOG.md\n[changelog-image]: https://img.shields.io/badge/CHANGELOG-md-limegreen\n\n[npm-url]: https://npmjs.com/package/gulp-stacksvg\n[npm-image]: https://badge.fury.io/js/gulp-stacksvg.svg\n\n[test-url]: https://github.com/firefoxic/gulp-stacksvg/actions\n[test-image]: https://github.com/firefoxic/gulp-stacksvg/actions/workflows/test.yaml/badge.svg?branch=main\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefoxic%2Fgulp-stacksvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirefoxic%2Fgulp-stacksvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefoxic%2Fgulp-stacksvg/lists"}