{"id":13774676,"url":"https://github.com/narol1024/rollup-plugin-sprite","last_synced_at":"2025-12-24T11:17:22.423Z","repository":{"id":45235174,"uuid":"118601029","full_name":"narol1024/rollup-plugin-sprite","owner":"narol1024","description":"Create a sprite sheet based on spritesmith for Rollup.js","archived":false,"fork":false,"pushed_at":"2021-08-01T10:54:20.000Z","size":24,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-18T20:42:08.467Z","etag":null,"topics":["rollup","rollup-plugin","rollup-plugin-sprite","spritesmith"],"latest_commit_sha":null,"homepage":"","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/narol1024.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-23T11:27:57.000Z","updated_at":"2023-03-07T06:46:51.000Z","dependencies_parsed_at":"2022-08-04T13:00:21.955Z","dependency_job_id":null,"html_url":"https://github.com/narol1024/rollup-plugin-sprite","commit_stats":null,"previous_names":["linjinying/rollup-plugin-sprite","narol1024/rollup-plugin-sprite"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narol1024%2Frollup-plugin-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narol1024%2Frollup-plugin-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narol1024%2Frollup-plugin-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narol1024%2Frollup-plugin-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/narol1024","download_url":"https://codeload.github.com/narol1024/rollup-plugin-sprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225022244,"owners_count":17408589,"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":["rollup","rollup-plugin","rollup-plugin-sprite","spritesmith"],"created_at":"2024-08-03T17:01:29.213Z","updated_at":"2025-12-24T11:17:17.371Z","avatar_url":"https://github.com/narol1024.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Other File Imports"],"readme":"# rollup-plugin-sprite\n\nconverts set of images into a spritesheet and SASS/LESS/Stylus mixins based on spritesmith for [Rollup.js](https://github.com/rollup/rollup).  \n\n\n[![Build Status](https://travis-ci.org/inarol/rollup-plugin-sprite.svg?branch=master)](https://travis-ci.org/inarol/rollup-plugin-sprite)\n[![NPM version](https://img.shields.io/npm/v/rollup-plugin-sprite.svg?style=flat)](https://www.npmjs.com/package/rollup-plugin-sprite)\n[![NPM package download of month](https://img.shields.io/npm/dm/rollup-plugin-sprite.svg)](https://www.npmjs.com/package/rollup-plugin-sprite)\n[![Coverage Status](https://coveralls.io/repos/github/inarol/rollup-plugin-sprite/badge.svg?branch=master)](https://coveralls.io/github/inarol/rollup-plugin-sprite?branch=master)\n\n## Installation\n\n```Shell\nnpm i rollup-plugin-sprite -D\n```\n\n## Usage\n\n```javascript\nimport spritesmith from \"rollup-plugin-sprite\";\n\nexport default {\n  input: \"src/main.js\",\n  plugins: [\n    spritesmith({\n      src: {\n        cwd: \"./src/ui/images/sprite\",\n        glob: \"**/*.png\"\n      },\n      target: {\n        image: \"./src/ui/images/sprite.png\",\n        css: \"./src/ui/sass/sprite.scss\"\n      },\n      cssImageRef: \"../images/sprite.png\",\n      output: {\n        image: \"./dist/images/sprite.png\"\n      },\n      spritesmithOptions: {\n        padding: 5\n      }\n    })\n  ]\n};\n```\n\n## Config\n- `src` - used to build list of source images.\n    - `cwd` should be the closest common directory for all source images;\n    - `glob` it is a glob. such as `**/*.png`\n\t\n- `target` - set files path where generated the sprite or stylesheet.\n    - `image` - target image filename;\n    - `css` - can be one of the following, `scss`,`less`,`css`,`stylus`,`json`.see [details](https://github.com/twolfson/spritesheet-templates#templates)\n\n- `cssImageRef` - optional, path by whic h generated image will be referenced in API. If target.image is interpolated, cssImageRef should be interpolated the same way too. Default: `../images/sprite.png`\n\n- `output` - optional, set output folder where the sprite or stylesheet will be saved.\n  - `image` - the image file path  \n  - `css` - the stylesheet path\n  \n- `spritesmithOptions` - optional. Options for [spritesmith](https://github.com/Ensighten/spritesmith).\n\n- `customTemplates` - optional. Object with keys and values corresponding to format names and template descriptions respectively. Template description can be either a path/to/template/file.handlebars or template function.\n\n## License\n\nReleased under the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarol1024%2Frollup-plugin-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarol1024%2Frollup-plugin-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarol1024%2Frollup-plugin-sprite/lists"}