@vertigis/icons NPM

Introduction

This project includes a collection of icons used by VertiGIS products.

Adding Icons

Make sure to run npm install before committing, as we automatically run svgo as a pre-commit hook to ensure the icons that are committed are optimized.

If you're simply adding a new icon you can place your .svg file in the icons directory. svgo will be run automatically on commit to ensure that the icons are minified and stripped of unnecessary content. You can also use npm run optimize to manually trigger a run of svgo over all the icon files.

Important notes when adding icons:

Convert all strokes to paths
Merge overlapping shapes
Knockout whitespace in objects
Do a quick manual review to make sure there are no unnecessary anchor points (extra anchors on a straight line are too common)
File names must not contain dashes as it is not supported by Android VectorDrawables. Use underscores instead. map-marker.svg => map_marker.svg
As of 2023, icons with an alternate state , such as an "off" state, should have an "_off" suffix. Stateless or "on" state icons do not use a suffix. This follows MUI's current icon naming scheme.
Certain elements and attributes are not supported across the web/iOS/Android platforms. Make sure your SVG is compliant with all 3 platforms. Some examples include <text>, <linearGradient>, etc.

Building the Icons

This step isn't necessary to add a new icon. This is only needed to debug issues with the CI build itself.

The project converts the .svg icons to iOS .pdf and Android .xml equivalents. The build is done automatically on our CI server, but if you wish to build them locally you will need to install Docker.

To build the icons run the following command using (if not using a bash like terminal such as git-bash, you can remove the \ and convert the command to one line):

mkdir -p dist && \
docker build -t gcx-icons . && \
docker create --name gcx-icons gcx-icons && \
docker cp gcx-icons:/gcx/icons/. ./dist/ && \
docker rm gcx-icons

This command will:

Build an image based on our Dockerfile. This will include the converted icons
Create a container from the image
Copy the converted icons from the container back to this project's dist folder
Remove the container. Note that the image still hangs around. You can delete the image using docker image rm gcx-icons if you'd like to clean it up