spritezero 安装和简单使用（基于centos7）-优快云博客

本文介绍如何使用@mapbox/spritezero工具在CentOS环境中批量生成SVG精灵图及其对应的JSON配置文件。通过简单的步骤，包括安装依赖包、准备SVG文件、编写JavaScript脚本来实现不同分辨率的精灵图制作。

参考 github : https://github.com/mapbox/spritezero

在centos 中：

mkdir spritezero

// 或者cnpm
npm install @mapbox/spritezero



// 可以拷贝到其他机器运行
zip -q -r spritezero.zip ./spritezero/

unzip spritezero.zip

准备好svgs：

// spritezero 目录下，添加

input 目录，里面是svg
output 目录，是运行的成果

新建mysprite.js

var spritezero = require('@mapbox/spritezero');
var fs = require('fs');
var glob = require('glob');
var path = require('path');

[1, 2, 4].forEach(function(pxRatio) {
    var svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg')))
        .map(function(f) {
            return {
                svg: fs.readFileSync(f),
                id: path.basename(f).replace('.svg', '')
            };
        });
    var pngPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.png'));
    var jsonPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.json'));

    // Pass `true` in the layout parameter to generate a data layout
    // suitable for exporting to a JSON sprite manifest file.
    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, function(err, dataLayout) {
        if (err) return;
        fs.writeFileSync(jsonPath, JSON.stringify(dataLayout));
    });

    // Pass `false` in the layout parameter to generate an image layout
    // suitable for exporting to a PNG sprite image file.
    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, function(err, imageLayout) {
        spritezero.generateImage(imageLayout, function(err, image) {
            if (err) return;
            fs.writeFileSync(pngPath, image);
        });
    });

});

运行：