官方仓库
https://github.com/mapbox/spritezero
新建output、input文件夹,把源SVG资源都放进input文件夹下
image.png
在Linux环境下当前目录安装插件

  1. npm install @mapbox/spritezero

用node运行如下代码

  1. var spritezero = require('@mapbox/spritezero');
  2. var fs = require('fs');
  3. var glob = require('glob');
  4. var path = require('path');
  5. [1, 2, 4].forEach(function(pxRatio) {
  6. var svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg')))
  7. .map(function(f) {
  8. return {
  9. svg: fs.readFileSync(f),
  10. id: path.basename(f).replace('.svg', '')
  11. };
  12. });
  13. var pngPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.png'));
  14. var jsonPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.json'));
  15. // Pass `true` in the layout parameter to generate a data layout
  16. // suitable for exporting to a JSON sprite manifest file.
  17. spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, function(err, dataLayout) {
  18. if (err) return;
  19. fs.writeFileSync(jsonPath, JSON.stringify(dataLayout));
  20. });
  21. // Pass `false` in the layout parameter to generate an image layout
  22. // suitable for exporting to a PNG sprite image file.
  23. spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, function(err, imageLayout) {
  24. spritezero.generateImage(imageLayout, function(err, image) {
  25. if (err) return;
  26. fs.writeFileSync(pngPath, image);
  27. });
  28. });
  29. });
  1. node index.js

会自动生成对应的雪碧图描述文件和雪碧图

定制参数

image.png