OuterSpatial Symbol Library
Add requests for new symbols as an issue. New symbols will be bundled into releases periodically.
The OuterSpatial Symbol Library uses semantic versioning, meaning:
- 0.0.z: Bug fixes and modifications
- 0.y.0: New icon(s) added
- x.0.0: Icon(s) removed, sprite scheme changed, or major features added
- 2.2.3: First Trailhead Labs release
- 3.0.0: Renamed OuterSpatial Symbol Library
- 3.1.0: Fixes a few icon colors and shapes
This repository was originally forked from Mapbox's Maki project, so the file structure is similar.
Source SVG files are in the
src subdirectory. To create pixel-perfect icons at different sizes, each icon is designed 6 times to support two different use cases:
- At 12, 18, and 24 pixels wide/tall for use in OuterSpatial Builder
- At 16, 24, and 32 pixels wide/tall, with a drop shadow, for display directly on top of basemaps
PNG renders of all of the SVGs are in the
renders directory. High-resolution (aka retina) versions of each icon are present as well, named using the common
You can use the SVGs and PNGs in this repository as they are without building anything. However, a render script is included to assist designers/developers who want to modify or create new icons. It will render SVGs to PNGs at 100% and 200% resolution, create sprites used by OuterSpatial.js and OuterSpatial Builder, and generate corresponding CSS styles for the sprites.
The script requires Node, Bash, Inkscape, and ImageMagick. In addition, each icon must have an appropriate entry in
./www/standalone/outerspatial-symbol-library.json to be rendered correctly.
To install the prerequisites:
- Install Node
- Install Homebrew and use it to install the rest of the prerequisites:
brew cask install xquartz
brew install Caskroom/cask/inkscape
brew install imagemagick
Then run the rendering script like this:
cd outerspatial-symbol-library npm install bash render.sh
This will create PNGs from the SVGs at single and double resolution, generate the image sprites, and create the corresponding CSS styles for the sprites. You can also run these commands individually and debug the rendering script using the following commands:
bash render.sh pngs
bash render.sh sprites
bash render.sh css
bash render.sh positions
bash render.sh debug