Best practice for using Ignition built-in SVG icons with dynamic fill color in a Perspective module

Module Development
1

Hi everyone,

I’m developing a custom Ignition Perspective module and I would like to use Ignition’s built-in icons (the same icons available in the Perspective icon selector).

My requirements are:

  • Use Ignition-provided icons (not custom external SVGs if possible)
  • Render the icon inside a <div> or a custom DOM element in my Perspective component
  • Be able to dynamically change the SVG properties, especially fill / stroke color (and possibly size or other attributes)
  • The solution should be supported and performant, since it may be used for many icons

What is the recommended way to access and render Ignition’s built-in SVG icons inside a custom Perspective component?

Specifically:

  • Is there a supported API or resource path to load Ignition icons as SVG?
  • Can these icons be rendered inline so their fill color can be controlled dynamically?
  • Are there any limitations or best practices when using built-in icons this way in a Perspective module?

Any guidance or examples would be greatly appreciated.

Thanks in advance.

2

It looks like internally we use the IconRenderer class for this, e.g.

import {
  IconRenderer,
  IconRendererConfig,
  StyleObject,
} from '@inductiveautomation/perspective-client';

/**
 * Component to simplify and standardize icons in component authoring. Accepts either a "path" prop (in shorthand format
 * library/iconName), or individual props "library" and "path".
 * @prop {string} path - Shorthand format icon path: library/iconName
 * @prop {string} library - Optional alternative to "path", name of library/directory where icon is located. Must also supply "name".
 * @prop {string} name - Optional alternative to "path", name of icon. Must also supply "library".
 * @prop {string} color - Color of the icon. Here for convenience, may instead assign "fill" in the styles prop.
 * @prop {number} size - Size of the icon used to create the viewBox. If provided, this will be a preferred value to
 * viewBox.width and viewBox.height;
 * @prop {number} viewBox.x - The x value (amount to crop from the X axis) assigned to the 'viewBox' portion of the
 * SVG that displays the icon.
 * @prop {number} viewBox.y - The y value (amount to crop from the Y axis) assigned to the 'viewBox' portion of the
 * SVG that displays the icon.
 * @prop {number} viewBox.width - The width assigned to the 'viewBox' portion of the SVG that displays the icon.
 * @prop {number} viewBox.height - The height assigned to the 'viewBox' portion of the SVG that displays the icon.
 * @prop {StyleObject} style - Any styles or perspective style classes to be applied to the svg element
 * @prop {boolean} allowClassNameOverride - Allows override of non-project classes are defined in otherProps.
 * @prop {object} otherProps - Any extra attributes to apply to svg element, including non-transformed ('psc-') classes
 */