Sdf icons

[nickpeihl]

Fixes elastic/kibana#39715

This automatically builds PNG spritesheets of Maki icons with Signed Distance Fields (SDF) for better sizing, coloring, and rotation in WebGL maps.

SVGs are scaled to generate three sizes of spritesheets. These are generated at build time and added to the repo.

sprite@1 - standard size
sprite@2 - retina
sprite@4 - ultra-hd

Each spritesheet comes with a .json file which maps the icon ids to the location in the spritesheet. Images from the spritesheet can be added to a mapbox-gl map by iteratively running the map.addImage method similar to these mapbox-gl-js internals.

Implementation note: You may need to set options.sdf = true in the map.addImage function.

SDF icon generation requires changes to Mapbox's fontnik and spritezero libraries:

• Fork of fontnik - fixes a bug to support H and V SVG commands in the pathToSdf function.
• Fork of spritezero - adds option.sdf to create PNG icons with signed distance fields directly from SVG icons

See this POC showing one way we could load the spritesheet icons based on mapbox-gl-js internals.

[nyurik]

As mentioned on Slack, it would be great if we can avoid checking in the build artifacts, and make it part of npm publish to push them in?

[nyurik]

looks good!