NOTE: This repository is no longer receiving updates and will be archived. You may want to consider using an alternative such as spreet.
Forked from @mapbox/spritezero
The mapbox-gl-js Map.addImage method supports loading icons with SDF (signed distance fields). The icon-color and icon-halo-color properties of the Mapbox Style Specification are only supported on SDF icons.
This fork of the spritezero library adds an options.sdf parameter to the spritezero functions. SDF icons are generated from SVGs using the pathToSDF function in the elastic/fontnik library.
You can see a demo of SDF sprites here.
var spritezero = require('@elastic/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, sdf: true, 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, sdf: true, format: false }, function(err, imageLayout) {
spritezero.generateImage(imageLayout, function(err, image) {
if (err) return;
fs.writeFileSync(pngPath, image);
});
});
});Requires nodejs v10.0.0 or greater.
$ npm install @elastic/spritezero@elastic/spritezero-cli is an executable for bundling and creating your own sprites from a folder of svg's:
$ npm install -g @elastic/spritezero-cli
$ spritezero --help
Usage:
spritezero [output filename] [input directory]
--retina shorthand for --ratio=2
--ratio=[n] pixel ratio
--sdf generate sdf sprites