Replace the current service with one that allows the use of FontAwesome Kits

The current service contains the CSS and font files embedded within the NG Service package. This means that it is difficult for the developer to use a different version of the icons (particularly the Pro icons) and we are reliant on Servoy publishing updates to get newer versions.

Using the kit concept could provide Servoy with a number of advantages over the current delivery method:

A kit can be flagged as always delivering the latest version so no need for upgrades – you are always up to date
You could supply a table of kit IDs that are fixed to specific versions (of the free icons) so a developer can consistently load a single version if required
The developer can supply their own kit ID to allow them to use the Pro icons without having to mess around with the underlying CSS and font files

The .load() method could be modified to accept a parameter indicating the kit id which governs the version, type (SVG or webfont) and even subset of icons to be delivered to the client.

The .spec file becomes something like:

{
    "name": "fontawesomekit-lib",
    "displayName": "lib",
    "version": 1,
    "definition": "fontawesomekit/lib/lib.js",
    "libraries": [
        {
            "name": "fontawesomekit-svg",
            "version": "1.0.0",
            "url": "https://kit.fontawesome.com/xxxxxxxxxx.js",
            "mimetype": "text/javascript",
            "group": false
        }
    ],
    "api":
    {
        "load": 
        {
            "parameters": [
                {
                    "name": "kitIdentifier",
                    "type": "string",
                    "optional": true
                }
            ]
        }
    }
}

Where the xxxxxxxxxx.js is the kit identifier for the default free icon set and the load method changes to:

angular.module('fontawesomekitLib', ['servoy'])
  .factory("fontawesomekitLib", function ($services) {
    return {
      load: function (kitIdentifier) {
        kitIdentifier = kitIdentifier || 'xxxxxxxxxx';
        var headNode = document.getElementsByTagName('head')[0];

        var existingNodes = headNode.querySelectorAll('[src^="https://kit.fontawesome.com/"]');
        existingNodes.forEach(function (element) {
          headNode.removeChild(element);
        });

        var existingNodes = headNode.querySelectorAll('[src^="https://kit-free.fontawesome.com/"]');
        existingNodes.forEach(function (element) {
          headNode.removeChild(element);
        });

        var existingNodes = headNode.querySelectorAll('[src^="https://kit-pro.fontawesome.com/"]');
        existingNodes.forEach(function (element) {
          headNode.removeChild(element);
        });

        document.getElementsByTagName('html')[0].classList.remove("fontawesome-i2svg-active", "fontawesome-i2svg-complete");

        var newNode = document.createElement('script');
        newNode.src = "https://kit.fontawesome.com/" + kitIdentifier + ".js";
        newNode.type = 'text/javascript';
        newNode.async = false;
        headNode.appendChild(newNode);
      }
    }
  })

In your code the developer would call plugins.fontawesomekit.load(); to use the standard Servoy kit or plugins.fontawesomekit.load('a12b34c56d'); to load the kit with ID a12b34c56d.

Servoy / fontawesome

Replace the current service with one that allows the use of FontAwesome Kits #1