https://github.com/stevage/mbsprite

Command line utilities for exploding/bundling Mapbox GL spritesheets
https://github.com/stevage/mbsprite

Last synced: about 1 month ago
JSON representation

Command line utilities for exploding/bundling Mapbox GL spritesheets

• Host: GitHub
• URL: https://github.com/stevage/mbsprite
• Owner: stevage
• Created: 2021-03-06T03:33:23.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-15T22:44:20.000Z (almost 3 years ago)
• Last Synced: 2024-10-08T15:53:54.647Z (about 1 month ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## mbsprite: Command line utilities for Mapbox sprites

This tool lets you create a Mapbox GL spritesheet from a number of PNGs. You can also disassemble a Mapbox spritesheet into its component pngs. It supports both @1x and @2x icons.

Unlike sprite-zero, which works on SVGs, this only works on PNGs.

### `mbsprite explode`

To explode all the icons from a Mapbox sprite sheet into `icons` and `icons@2x`:

`node mbsprite explode https://api.mapbox.com/styles/v1/mapbox/light-v9/sprite?access_token=pk.eyYOURACCESSTOKEN icons`

### `mbsprite bundle`

To bundle all the icons back into a sprite sheet in `sprite/sprite.json`, `sprite/sprite.png`, `sprite/[email protected]` and `sprite/[email protected]`:

`node mbsprite bundle sprite icons icons@2x`

### Merging spritesheets

To merge two spritesheets together, simply explode two sprite sheets into the same directory, then bundle.

### Usage with npx

If you have [`npx`](https://www.npmjs.com/package/npx) installed, you can simply run:

`npx mbsprite `

### Using with Figma

To generate a spritesheet from icons in Figma, see the instructions in [Figmasset-export](npmjs.com/package/figmasset-export).

### Using the sprite file in Mapbox GL JS or Maplibre GL JS

1. Place the sprite files somewhere accessible to your web application. For instance, `https://example.com/sprite/sprite.json` (and `https://example.com/sprite/sprite.png` etc).

2. Modify your style file to refer to the part of the path without the extension:

```

{

  "version": 8,

  "sprite": "https://example.com/sprite/sprite",

  ...

}

```

Note that the path to the sprite must be absolute (it can't be relative, like `/sprite`).