Siren Platform User Guide

Adding custom icon packs

You can import SVG (Scalable Vector Graphic) images as icons into Siren Investigate using the FontCustom utility. This enables you to customize the appearance of your data models to your specific requirements.

Note

FontCustom installation requires that you are familiar with the command line tools for the operating system being used–Linux, MacOS, or Windows.

Step 1: Installing FontCustom

FontCustom is a utility that creates cross-browser fonts from SVG images through the command line. The GitHub repository provides the installation instructions for Linux, MacOS, and Windows. Please install FontCustom before moving to the next step.

Step 2: Creating an icon pack

An icon pack is a folder of icon files that can be uploaded to Siren Investigate to use as custom icons.

Once you have installed FontCustom, go to the folder containing the SVG images and run the following command on the command line:

fontcustom compile --name 'my-font-family' --selector=.my-icon-{{glyph}}

  • The --name flag defines the font-family name

  • The --selector flag defines the icon prefix

Important

Ensure that both of these flags are unique every time an icon pack is created. In this example, .my-icon- is the prefix (note the dot), while {{glyph}} is the placeholder for the icon name. Please keep the dot and placeholder as shown – the FontCustom utility will raise an error if this is not done.

After running the command (ensuring that the conditions of unique flags and placeholder are met), the output should look something like this:

custom_icon_output.png

The icon pack has been created in the same folder. The name of the folder will be the same as the --name flag used in the command. Do not change any of the files in this folder. Create a .zip file of the folder to upload to Investigate.

Step 3: Uploading the icon pack

Go Management > Icon Pack > Import and select the .zip file created in the last step. The upload once successful will show the list of uploaded icon packs.

icon_packs.png

Tip

If you need to delete an icon pack, click its bin icon.

Step 4: Using the custom icons

You can search for the icons using their names or the prefix used when the icon pack was created. In this example, a custom snowman icon was uploaded. To use this icon, you go to Data Model and, in the Icon text box, search for “snowman” (or your icon name), select the icon, and click Save.

data_model_snowman_icon.png

Once selected and saved, the icons are displayed wherever the data model is used across the application. The following two screenshots show the snowman icon being used in the Graph Browser and the Data Model Graph, respectively.

graph_browser_snowman.png
graph_snowman.png