Adding Icons

Adding Icons

Add the SVG

First, add the SVG file to the icons folder. The file should use the following naming format:

{icon name}-{size}.svg

If the icon is a filled icon (not outline), add a -f to the end:

{icon name}-{size}-f.svg

Adding Keywords

You can also optionally add aliases to make icons easier to find. Simply add a new entry to docs/keywords.json. Use the following format:

  "name-of-icon": {
    "alias": ["any", "tags", "go", "here"],
    "category": "GIS"
  }

Optimize the Icons

Ensure you've installed library dependencies:

npm install

Then optimize the icons:

npm start

This will optimize all svgs, build a sprite for each size/variant, and generate the icons.json file.

Bumping the Version

Make sure you increment the version number in package.json before releasing.

Verifying Added Icons

To make sure that the icons were added, optimized, and are displaying properly, it's a good idea to preview the doc site locally. To start up a preview server use:

npm run server

Then visit http://localhost:8080/ to view the documentation.

Deploying the Documentation Site

Once the changes are committed and merged into master, the documentation site will be deployed to https://esri.github.io/calcite-ui-icons/ automatically.