{"id":19318301,"url":"https://github.com/feflow/sprite-loader","last_synced_at":"2025-04-22T17:31:01.837Z","repository":{"id":57156974,"uuid":"116953689","full_name":"feflow/sprite-loader","owner":"feflow","description":"sprite loader module for webpack","archived":false,"fork":false,"pushed_at":"2018-07-04T08:13:38.000Z","size":51,"stargazers_count":8,"open_issues_count":3,"forks_count":2,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-18T13:33:13.320Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-10T12:17:10.000Z","updated_at":"2020-11-19T14:25:36.000Z","dependencies_parsed_at":"2022-09-03T16:51:09.185Z","dependency_job_id":null,"html_url":"https://github.com/feflow/sprite-loader","commit_stats":null,"previous_names":["iv-web/sprite-loader"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feflow%2Fsprite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feflow%2Fsprite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feflow%2Fsprite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feflow%2Fsprite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feflow","download_url":"https://codeload.github.com/feflow/sprite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250287454,"owners_count":21405617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-10T01:18:05.510Z","updated_at":"2025-04-22T17:31:01.467Z","avatar_url":"https://github.com/feflow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003esprites-loader\u003c/h1\u003e\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n```bash\nnpm install --save-dev sprites-loader\n```\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n**file.css**\n```css \n  .image {\n    background-image: url(\"./assets/images/example.png?__sprite\");\n}\n```\n**file.js**\n```js\nimport css from 'file.css';\n```\n\n**webpack.config.js**\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]\n      }\n    ]\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eOptions\u003c/h2\u003e\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|**`name`**|`{String}`|`sprite-[hash:6].png`|Configure a custom filename template for your file|\n|**`context`**|`{String}`|`this.options.context`|Configure a custom file context, defaults to `webpack.config.js` [context](https://webpack.js.org/configuration/entry-context/#context)|\n|**`outputPath`**|`{String\\|Function}`|`Original images path`|Configure a custom `output` path for your files|\n|**`padding`**|`{Number}`|`2px`|padding between images|\n  \nyou can set css property width and height, the sprite's `background-size` will be set according to the css property width and height, the first value of `background-size` property is `(width/imageWidth) * spriteWidth`, the second value of `background-size` property calculate as same the the second value. if you not set width and height, the element will set width and height to image's width and height. \n\nHere's an example how to use sprites-loader\n**css code**\n```scss\ndiv {\n    background-image: url('./img/love.png?__sprite')\n}\n\np {\n    margin: 0;\n    width: 32px;\n    height: 32px;\n    background: no-repeat url('./img/love-heart.png?__sprite');\n}\n```\n\n**webpack.config.js**\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]\n      }\n    ]\n  }\n}\n```\n\n**output**\n```css\ndiv {\n  background-image: url(\"img/sprite-6c7333.png\");background-size:400px 200px;\nbackground-position:-0px -0px;\nwidth:200px;\nheight:200px;\n }\n\na {\n  margin: 0;\n  width: 32px;\n  height: 32px;\n  background: no-repeat url(\"img/sprite-6c7333.png\");background-size:64px 32px;\nbackground-position:-32px -0px;\n }\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeflow%2Fsprite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeflow%2Fsprite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeflow%2Fsprite-loader/lists"}