Custom Icons Example

Overview

HNOD now support the ability to override the default UI icons, the feature is enabled through the runnable bundle when exporting an icons function.

example:

import { PartialAvailableIcons } from "@here/hnod-sdk";

import { Start } from "./gen/start";
import { Settings } from "./gen/settings";
import { Magnifier } from "./gen/magnifier";
import { Close } from "./gen/close";

const materialIcons: PartialAvailableIcons = {
  Start,
  Settings,
  Magnifier,
  Close
};

export default webBundleWith({
  icons: () => ({
    id: "com.example.custom-icons",
    icons: materialIcons
  })
});

HNOD will check if the icon has an override then it'll render the provided icon otherwise it'll render the default application icon.

HNOD will apply the latest loaded custom icons package, if there are more than one, only the last one will be applied.

Tools

As of "@here/hnod-sdk" v1.5.0, the SDK export a generateSVGs utility function via @here/hnod-sdk/lib/tools

This utility function will help in generating HNOD compatible icon with color customization support.

Usage Example:

import { generateSVGs } from "@here/hnod-sdk/lib/tools";

generateSVGs({
  inputDir: "assets",
  outputDir: "src/gen",
  primaryColor: "none",
  secondaryColor: "#000000"
});

P.S. This option is still experimental, it might be subject to a further API change.

results matching ""

    No results matching ""