How to create iconsets and imagesets for TG applications - fieldenms/tg GitHub Wiki

Often during development of new application functionality some specific icons are required.

The following steps explain how to use newly created icons.

  1. All icons should be optimised (https://jakearchibald.github.io/svgomg/ + add id="iconname") and plcaed into one folder. It is better to change every icon id to some meaningful name by editing an icon file and correcting the id which is at the beginning.
  2. Copy the icon folder to src/main/resources (the *-web-ui project).
  3. Combine all icons into one iconset using IronIconsetUtility.

For example:

public class MenuIconsetCreator {
    public static void main(final String[] args) throws IOException {
        final String srcFolder= "src/main/resources/my_icons";
        final String iconsetId = "iconset-id";
        final int svgWidth = 1000;
        final String outputFile = "src/main/resources/my-icons.js";
        final IronIconsetUtility iconsetUtility = new IronIconsetUtility(iconsetId, svgWidth, srcFolder);
        iconsetUtility.createSvgIconset(outputFile);
    }
}

This will create an iconset file src/main/resources/my-icons.js.

  1. This file should be imported by application-startup-resources.js
import '/resources/my-icons.js';

Finally, icons are ready to be used in application code.

Each icon can be referenced like so: iconset-id:iconId.