参考 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);
});
});
});
运行:
cd spritezero
node mysprite.js
ps:svg文件可以在nucleo中进行编辑