{"id":16485816,"url":"https://github.com/creeperyang/ysprite","last_synced_at":"2025-03-23T12:33:12.410Z","repository":{"id":57404534,"uuid":"48052275","full_name":"creeperyang/ysprite","owner":"creeperyang","description":"A lightweight yet powerful css sprite util.","archived":false,"fork":false,"pushed_at":"2016-12-02T14:22:40.000Z","size":218,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-12T13:27:11.314Z","etag":null,"topics":["cli-utilities","sprite","sprite-image"],"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/creeperyang.png","metadata":{"files":{"readme":"readme.md","changelog":null,"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":"2015-12-15T15:39:25.000Z","updated_at":"2022-11-29T00:40:23.000Z","dependencies_parsed_at":"2022-09-11T02:50:09.959Z","dependency_job_id":null,"html_url":"https://github.com/creeperyang/ysprite","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creeperyang%2Fysprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creeperyang%2Fysprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creeperyang%2Fysprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creeperyang%2Fysprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creeperyang","download_url":"https://codeload.github.com/creeperyang/ysprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221850755,"owners_count":16891672,"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":["cli-utilities","sprite","sprite-image"],"created_at":"2024-10-11T13:27:22.170Z","updated_at":"2024-10-28T15:48:52.819Z","avatar_url":"https://github.com/creeperyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ysprite\n\n[![npm version](https://badge.fury.io/js/ysprite.svg)](https://badge.fury.io/js/ysprite)\n[![Build Status](https://travis-ci.org/creeperyang/ysprite.svg?branch=master)](https://travis-ci.org/creeperyang/ysprite)\n[![Coverage Status](https://coveralls.io/repos/github/creeperyang/ysprite/badge.svg?branch=master)](https://coveralls.io/github/creeperyang/ysprite?branch=master)\n[![Dependency Status](https://david-dm.org/creeperyang/ysprite.svg)](https://david-dm.org/creeperyang/ysprite)\n[![devDependency Status](https://david-dm.org/creeperyang/ysprite/dev-status.svg)](https://david-dm.org/creeperyang/ysprite#info=devDependencies)\n[![npm](https://img.shields.io/npm/dm/ysprite.svg)](https://www.npmjs.com/package/ysprite)\n\n\u003e A lightweight yet powerful css sprite util.\n\n## Install\n\n[![NPM](https://nodei.co/npm/ysprite.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/ysprite/)\n\n**Note:**\n\nCore dependency `lwip@0.0.9` depends on `C++11` compiler, so you should install `gcc/g++-4.8` or something like first.\n\n## Usage\n\n`ysprite` has a built-in cli, so you can use both cli and node API.\n\n### Use Cli\n\nIf you want to use the cli everywhere, install **globally** (`npm i -g ysprite`).\n\nAnd then, it's ready to use:\n\n```bash\n  ysprite -s test/res/icons -o .tmp/x.png --out-style .tmp/x.css\n\n  Sprite successfully!\n    image: .tmp/x.png  retina: .tmp/x@2x.png  style: .tmp/x.css\n```\n\n### Use API\n\n```js\nimport sprite, { generateStyle, generateSprite } from 'ysprite';\n\n// sprite is sprite options, style is style options\nsprite(imgGlob|dir, { sprite, style }).then(({\n    image, // Buffer, normal image\n    retina, // Buffer, retina image\n    imagePath,\n    retinaImagePath,\n    style, // String, css\n    stylePath\n}) =\u003e {\n    // do something\n})\n\ngenerateSprite(imagePathList, spriteOpts).then(data =\u003e {\n    return generateStyle(data[0].source, styleOpts)\n}).then(style =\u003e console.log(style))\n```\n\n#### sprite(imgGlob, { sprite, style })\n\n- `imgGlob` could be `dir` (like `images/icons`) or `glob` (like `images/icons/**/*.png`)\n\n    And when you use dir, it's equal glob `dir/**/*.png`\n\n- `sprite` and `style` are options, described below.\n\n- return a promise, and you could get an object like:\n\n    ```js\n    {\n        image, // Buffer, normal image\n        retina, // Buffer, retina image\n        imagePath, // image path\n        retinaImagePath, // retina image path\n        style, // String, css\n        stylePath // style path\n    }\n    ```\n\n**sprite options**\n\n```js\n{\n    imagePath, // required, dest image path\n    retinaImagePath, // dest retina image path\n    retina, // whether to enable retina mode\n    filter, // filter out normal image\n    retinaFilter, // filter out retina image\n    writeToFile, // whether write sprite image to file\n    margin = 0, // margin between icons\n    compression = 'high', // output png compression, one of ['none', 'fast', 'high']\n    interlaced = false, // whether enable png interlaced\n    arrangement = 'compact' // arrangement of images: 'vertical'|'horizontal'|'compact'\n}\n```\n\n**style options**\n\n```js\n{\n    connector = '-', // className connector, default to \"-\"\n    prefix = 'icon', // className prefix, default to \"icon\"\n    suffix = '', // className suffix\n    eol, // new line\n    retina = false, // whether generate retina style\n    writeToFile = false, // whether write style to file\n    stylePath, // style path\n    imagePath, // image path\n    retinaImagePath, // retina image path\n    banner = false // banner\n}\n```\n\n- Icon's className is composed by `prefix + connector + name + suffix`, so `play.png` will be `.icon-play` with default option.\n- `eol`'s default value is `require('os').EOL`, so `\\r\\n` in `Windows`.\n- `banner` could be string (be put in head with origin text), `true` (a timestamp), and false (no banner).\n\n\n#### generateSprite(imagePathList, options)\n\n- `imagePathList` should be array of image path.\n- `options` is sprite options described above.\n- return a promise, and you can get data:\n\n```js\n{\n    // every single icon's info, like [{ x, y, margin, width, height, path }],\n    // used by generateStyle\n    source,\n    path, // image path\n    params, // { compression, interlaced: true|false, transparency: true}\n    image, // it's lwip's image, you can do some magic thing with it.\n    width, // image width\n    height // image height\n}\n```\n\n#### generateStyle(imageInfoList, options)\n\n- `imageInfoList` should be array of image info, generated by `generateStyle`\n- `options` is style options described above.\n- return a promise, and you can get the style content.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreeperyang%2Fysprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreeperyang%2Fysprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreeperyang%2Fysprite/lists"}