@ni/ok-components 0.1.26 → 0.2.0

package/dist/all-components-bundle.js

@@ -18291,6 +18291,10 @@
       name: 'folder_open_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7 3v1.002h6V6h-1V5H3v1H2V3ZM2 13h11l1-6H2Z" class="cls-1"/></svg>`,
   };
+  const forklift16X16 = {
+      name: 'forklift_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13 11V4c0-.55-.45-1-1-1h-1v4.24l-1.53-3.3C9.24 3.37 8.69 3 8.08 3H4.01l1 1v3h-2v2.19c-.31.35-.5.81-.5 1.31 0 1.1.9 2 2 2 .5 0 .96-.19 1.31-.5h3.04c.39.32.88.52 1.42.52s1.04-.2 1.42-.52H15zm-8.5.25c-.41 0-.75-.34-.75-.75s.34-.75.75-.75.75.34.75.75-.34.75-.75.75m4.18-2.57L7 7H6V4h2.07c.21 0 .39.12.47.34l1.71 3.68c-.62 0-1.18.25-1.58.66Zm1.59 2.59c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1" class="cls-1"/></svg>`,
+  };
   const forwardSlash16X16 = {
       name: 'forward_slash_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.027 14 2.5-12h1.5l-2.5 12z" class="cls-1"/></svg>`,
@@ -18803,18 +18807,28 @@
 `;
 
   /**
-   * The base class for icon components
+   * The base class for icon components. Implementors:
+   * - Should not increase the API surface area, consumers of icons would not expect additional attributes to configure
+   * - Should not add interactive components to the template, expect to be visual only
+   * - Should respond well to sizing of the element
+   * - Should respond to configuration of the severity attribute and other tokens such as theme
    */
   class Icon extends FoundationElement {
+  }
+  __decorate([
+      attr
+  ], Icon.prototype, "severity", void 0);
+
+  /**
+   * Icon base class for the standard nimble icon set
+   */
+  class IconSvg extends Icon {
       constructor(/** @internal */ icon) {
           super();
           this.icon = icon;
       }
   }
-  __decorate([
-      attr
-  ], Icon.prototype, "severity", void 0);
-  const registerIcon = (baseName, iconClass) => {
+  const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
           template: template$N,
@@ -18828,12 +18842,12 @@
   /**
    * The icon component for the 'arrowExpanderLeft' icon
    */
-  class IconArrowExpanderLeft extends Icon {
+  class IconArrowExpanderLeft extends IconSvg {
       constructor() {
           super(arrowExpanderLeft16X16);
       }
   }
-  registerIcon('icon-arrow-expander-left', IconArrowExpanderLeft);
+  registerIconSvg('icon-arrow-expander-left', IconArrowExpanderLeft);
   const iconArrowExpanderLeftTag = 'nimble-icon-arrow-expander-left';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -18841,12 +18855,12 @@
   /**
    * The icon component for the 'arrowExpanderRight' icon
    */
-  class IconArrowExpanderRight extends Icon {
+  class IconArrowExpanderRight extends IconSvg {
       constructor() {
           super(arrowExpanderRight16X16);
       }
   }
-  registerIcon('icon-arrow-expander-right', IconArrowExpanderRight);
+  registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
   const coreLabelDefaults = {
@@ -19711,12 +19725,12 @@
   /**
    * The icon component for the 'exclamationMark' icon
    */
-  class IconExclamationMark extends Icon {
+  class IconExclamationMark extends IconSvg {
       constructor() {
           super(exclamationMark16X16);
       }
   }
-  registerIcon('icon-exclamation-mark', IconExclamationMark);
+  registerIconSvg('icon-exclamation-mark', IconExclamationMark);
   const iconExclamationMarkTag = 'nimble-icon-exclamation-mark';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -19724,12 +19738,12 @@
   /**
    * The icon component for the 'info' icon
    */
-  class IconInfo extends Icon {
+  class IconInfo extends IconSvg {
       constructor() {
           super(info16X16);
       }
   }
-  registerIcon('icon-info', IconInfo);
+  registerIconSvg('icon-info', IconInfo);
   const iconInfoTag = 'nimble-icon-info';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -19737,12 +19751,12 @@
   /**
    * The icon component for the 'triangleFilled' icon
    */
-  class IconTriangleFilled extends Icon {
+  class IconTriangleFilled extends IconSvg {
       constructor() {
           super(triangleFilled16X16);
       }
   }
-  registerIcon('icon-triangle-filled', IconTriangleFilled);
+  registerIconSvg('icon-triangle-filled', IconTriangleFilled);
   const iconTriangleFilledTag = 'nimble-icon-triangle-filled';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -19750,12 +19764,12 @@
   /**
    * The icon component for the 'times' icon
    */
-  class IconTimes extends Icon {
+  class IconTimes extends IconSvg {
       constructor() {
           super(times16X16);
       }
   }
-  registerIcon('icon-times', IconTimes);
+  registerIconSvg('icon-times', IconTimes);
   const iconTimesTag = 'nimble-icon-times';
 
   /**
@@ -20830,12 +20844,12 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'arrowExpanderDown' icon
    */
-  class IconArrowExpanderDown extends Icon {
+  class IconArrowExpanderDown extends IconSvg {
       constructor() {
           super(arrowExpanderDown16X16);
       }
   }
-  registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
+  registerIconSvg('icon-arrow-expander-down', IconArrowExpanderDown);
   const iconArrowExpanderDownTag = 'nimble-icon-arrow-expander-down';
 
   const DropdownPosition = {
@@ -21258,12 +21272,12 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'asterisk' icon
    */
-  class IconAsterisk extends Icon {
+  class IconAsterisk extends IconSvg {
       constructor() {
           super(asterisk5X5);
       }
   }
-  registerIcon('icon-asterisk', IconAsterisk);
+  registerIconSvg('icon-asterisk', IconAsterisk);
   const iconAsteriskTag = 'nimble-icon-asterisk';
 
   /**
@@ -22650,12 +22664,12 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'add' icon
    */
-  class IconAdd extends Icon {
+  class IconAdd extends IconSvg {
       constructor() {
           super(add16X16);
       }
   }
-  registerIcon('icon-add', IconAdd);
+  registerIconSvg('icon-add', IconAdd);
   const iconAddTag = 'nimble-icon-add';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -22663,12 +22677,12 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'arrowDown' icon
    */
-  class IconArrowDown extends Icon {
+  class IconArrowDown extends IconSvg {
       constructor() {
           super(arrowDown16X16);
       }
   }
-  registerIcon('icon-arrow-down', IconArrowDown);
+  registerIconSvg('icon-arrow-down', IconArrowDown);
   const iconArrowDownTag = 'nimble-icon-arrow-down';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -22676,216 +22690,216 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'arrowDownLeftAndArrowUpRight' icon
    */
-  class IconArrowDownLeftAndArrowUpRight extends Icon {
+  class IconArrowDownLeftAndArrowUpRight extends IconSvg {
       constructor() {
           super(arrowDownLeftAndArrowUpRight16X16);
       }
   }
-  registerIcon('icon-arrow-down-left-and-arrow-up-right', IconArrowDownLeftAndArrowUpRight);
+  registerIconSvg('icon-arrow-down-left-and-arrow-up-right', IconArrowDownLeftAndArrowUpRight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowDownRectangle' icon
    */
-  class IconArrowDownRectangle extends Icon {
+  class IconArrowDownRectangle extends IconSvg {
       constructor() {
           super(arrowDownRectangle16X16);
       }
   }
-  registerIcon('icon-arrow-down-rectangle', IconArrowDownRectangle);
+  registerIconSvg('icon-arrow-down-rectangle', IconArrowDownRectangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowDownRightAndArrowUpLeft' icon
    */
-  class IconArrowDownRightAndArrowUpLeft extends Icon {
+  class IconArrowDownRightAndArrowUpLeft extends IconSvg {
       constructor() {
           super(arrowDownRightAndArrowUpLeft16X16);
       }
   }
-  registerIcon('icon-arrow-down-right-and-arrow-up-left', IconArrowDownRightAndArrowUpLeft);
+  registerIconSvg('icon-arrow-down-right-and-arrow-up-left', IconArrowDownRightAndArrowUpLeft);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowDownTwoRectangles' icon
    */
-  class IconArrowDownTwoRectangles extends Icon {
+  class IconArrowDownTwoRectangles extends IconSvg {
       constructor() {
           super(arrowDownTwoRectangles);
       }
   }
-  registerIcon('icon-arrow-down-two-rectangles', IconArrowDownTwoRectangles);
+  registerIconSvg('icon-arrow-down-two-rectangles', IconArrowDownTwoRectangles);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowExpanderUp' icon
    */
-  class IconArrowExpanderUp extends Icon {
+  class IconArrowExpanderUp extends IconSvg {
       constructor() {
           super(arrowExpanderUp16X16);
       }
   }
-  registerIcon('icon-arrow-expander-up', IconArrowExpanderUp);
+  registerIconSvg('icon-arrow-expander-up', IconArrowExpanderUp);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowInCircle' icon
    */
-  class IconArrowInCircle extends Icon {
+  class IconArrowInCircle extends IconSvg {
       constructor() {
           super(arrowInCircle16X16);
       }
   }
-  registerIcon('icon-arrow-in-circle', IconArrowInCircle);
+  registerIconSvg('icon-arrow-in-circle', IconArrowInCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowLeftFromLine' icon
    */
-  class IconArrowLeftFromLine extends Icon {
+  class IconArrowLeftFromLine extends IconSvg {
       constructor() {
           super(arrowLeftFromLine16X16);
       }
   }
-  registerIcon('icon-arrow-left-from-line', IconArrowLeftFromLine);
+  registerIconSvg('icon-arrow-left-from-line', IconArrowLeftFromLine);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowLeftTwoRectangles' icon
    */
-  class IconArrowLeftTwoRectangles extends Icon {
+  class IconArrowLeftTwoRectangles extends IconSvg {
       constructor() {
           super(arrowLeftTwoRectangles);
       }
   }
-  registerIcon('icon-arrow-left-two-rectangles', IconArrowLeftTwoRectangles);
+  registerIconSvg('icon-arrow-left-two-rectangles', IconArrowLeftTwoRectangles);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowOutCircle' icon
    */
-  class IconArrowOutCircle extends Icon {
+  class IconArrowOutCircle extends IconSvg {
       constructor() {
           super(arrowOutCircle16X16);
       }
   }
-  registerIcon('icon-arrow-out-circle', IconArrowOutCircle);
+  registerIconSvg('icon-arrow-out-circle', IconArrowOutCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowPartialRotateLeft' icon
    */
-  class IconArrowPartialRotateLeft extends Icon {
+  class IconArrowPartialRotateLeft extends IconSvg {
       constructor() {
           super(arrowPartialRotateLeft16X16);
       }
   }
-  registerIcon('icon-arrow-partial-rotate-left', IconArrowPartialRotateLeft);
+  registerIconSvg('icon-arrow-partial-rotate-left', IconArrowPartialRotateLeft);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowRightThin' icon
    */
-  class IconArrowRightThin extends Icon {
+  class IconArrowRightThin extends IconSvg {
       constructor() {
           super(arrowRightThin16X16);
       }
   }
-  registerIcon('icon-arrow-right-thin', IconArrowRightThin);
+  registerIconSvg('icon-arrow-right-thin', IconArrowRightThin);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowRightToLine' icon
    */
-  class IconArrowRightToLine extends Icon {
+  class IconArrowRightToLine extends IconSvg {
       constructor() {
           super(arrowRightToLine16X16);
       }
   }
-  registerIcon('icon-arrow-right-to-line', IconArrowRightToLine);
+  registerIconSvg('icon-arrow-right-to-line', IconArrowRightToLine);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowRightTwoRectangles' icon
    */
-  class IconArrowRightTwoRectangles extends Icon {
+  class IconArrowRightTwoRectangles extends IconSvg {
       constructor() {
           super(arrowRightTwoRectangles);
       }
   }
-  registerIcon('icon-arrow-right-two-rectangles', IconArrowRightTwoRectangles);
+  registerIconSvg('icon-arrow-right-two-rectangles', IconArrowRightTwoRectangles);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowRotateRight' icon
    */
-  class IconArrowRotateRight extends Icon {
+  class IconArrowRotateRight extends IconSvg {
       constructor() {
           super(arrowRotateRight16X16);
       }
   }
-  registerIcon('icon-arrow-rotate-right', IconArrowRotateRight);
+  registerIconSvg('icon-arrow-rotate-right', IconArrowRotateRight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowULeft' icon
    */
-  class IconArrowULeft extends Icon {
+  class IconArrowULeft extends IconSvg {
       constructor() {
           super(arrowULeft16X16);
       }
   }
-  registerIcon('icon-arrow-u-left', IconArrowULeft);
+  registerIconSvg('icon-arrow-u-left', IconArrowULeft);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowURight' icon
    */
-  class IconArrowURight extends Icon {
+  class IconArrowURight extends IconSvg {
       constructor() {
           super(arrowURight16X16);
       }
   }
-  registerIcon('icon-arrow-u-right', IconArrowURight);
+  registerIconSvg('icon-arrow-u-right', IconArrowURight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUUp' icon
    */
-  class IconArrowUUp extends Icon {
+  class IconArrowUUp extends IconSvg {
       constructor() {
           super(arrowUUp16X16);
       }
   }
-  registerIcon('icon-arrow-u-up', IconArrowUUp);
+  registerIconSvg('icon-arrow-u-up', IconArrowUUp);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUp' icon
    */
-  class IconArrowUp extends Icon {
+  class IconArrowUp extends IconSvg {
       constructor() {
           super(arrowUp16X16);
       }
   }
-  registerIcon('icon-arrow-up', IconArrowUp);
+  registerIconSvg('icon-arrow-up', IconArrowUp);
   const iconArrowUpTag = 'nimble-icon-arrow-up';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -22893,228 +22907,228 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'arrowUpLeftAndArrowDownRight' icon
    */
-  class IconArrowUpLeftAndArrowDownRight extends Icon {
+  class IconArrowUpLeftAndArrowDownRight extends IconSvg {
       constructor() {
           super(arrowUpLeftAndArrowDownRight16X16);
       }
   }
-  registerIcon('icon-arrow-up-left-and-arrow-down-right', IconArrowUpLeftAndArrowDownRight);
+  registerIconSvg('icon-arrow-up-left-and-arrow-down-right', IconArrowUpLeftAndArrowDownRight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUpRectangle' icon
    */
-  class IconArrowUpRectangle extends Icon {
+  class IconArrowUpRectangle extends IconSvg {
       constructor() {
           super(arrowUpRectangle16X16);
       }
   }
-  registerIcon('icon-arrow-up-rectangle', IconArrowUpRectangle);
+  registerIconSvg('icon-arrow-up-rectangle', IconArrowUpRectangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUpRightAndArrowDownLeft' icon
    */
-  class IconArrowUpRightAndArrowDownLeft extends Icon {
+  class IconArrowUpRightAndArrowDownLeft extends IconSvg {
       constructor() {
           super(arrowUpRightAndArrowDownLeft16X16);
       }
   }
-  registerIcon('icon-arrow-up-right-and-arrow-down-left', IconArrowUpRightAndArrowDownLeft);
+  registerIconSvg('icon-arrow-up-right-and-arrow-down-left', IconArrowUpRightAndArrowDownLeft);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUpRightFromSquare' icon
    */
-  class IconArrowUpRightFromSquare extends Icon {
+  class IconArrowUpRightFromSquare extends IconSvg {
       constructor() {
           super(arrowUpRightFromSquare16X16);
       }
   }
-  registerIcon('icon-arrow-up-right-from-square', IconArrowUpRightFromSquare);
+  registerIconSvg('icon-arrow-up-right-from-square', IconArrowUpRightFromSquare);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowUpTwoRectangles' icon
    */
-  class IconArrowUpTwoRectangles extends Icon {
+  class IconArrowUpTwoRectangles extends IconSvg {
       constructor() {
           super(arrowUpTwoRectangles);
       }
   }
-  registerIcon('icon-arrow-up-two-rectangles', IconArrowUpTwoRectangles);
+  registerIconSvg('icon-arrow-up-two-rectangles', IconArrowUpTwoRectangles);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowsMaximize' icon
    */
-  class IconArrowsMaximize extends Icon {
+  class IconArrowsMaximize extends IconSvg {
       constructor() {
           super(arrowsMaximize16X16);
       }
   }
-  registerIcon('icon-arrows-maximize', IconArrowsMaximize);
+  registerIconSvg('icon-arrows-maximize', IconArrowsMaximize);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowsRepeat' icon
    */
-  class IconArrowsRepeat extends Icon {
+  class IconArrowsRepeat extends IconSvg {
       constructor() {
           super(arrowsRepeat16X16);
       }
   }
-  registerIcon('icon-arrows-repeat', IconArrowsRepeat);
+  registerIconSvg('icon-arrows-repeat', IconArrowsRepeat);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'arrowsRotateReverseDot' icon
    */
-  class IconArrowsRotateReverseDot extends Icon {
+  class IconArrowsRotateReverseDot extends IconSvg {
       constructor() {
           super(arrowsRotateReverseDot16X16);
       }
   }
-  registerIcon('icon-arrows-rotate-reverse-dot', IconArrowsRotateReverseDot);
+  registerIconSvg('icon-arrows-rotate-reverse-dot', IconArrowsRotateReverseDot);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'at' icon
    */
-  class IconAt extends Icon {
+  class IconAt extends IconSvg {
       constructor() {
           super(at16X16);
       }
   }
-  registerIcon('icon-at', IconAt);
+  registerIconSvg('icon-at', IconAt);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bars' icon
    */
-  class IconBars extends Icon {
+  class IconBars extends IconSvg {
       constructor() {
           super(bars16X16);
       }
   }
-  registerIcon('icon-bars', IconBars);
+  registerIconSvg('icon-bars', IconBars);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bell' icon
    */
-  class IconBell extends Icon {
+  class IconBell extends IconSvg {
       constructor() {
           super(bell16X16);
       }
   }
-  registerIcon('icon-bell', IconBell);
+  registerIconSvg('icon-bell', IconBell);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellAndComment' icon
    */
-  class IconBellAndComment extends Icon {
+  class IconBellAndComment extends IconSvg {
       constructor() {
           super(bellAndComment16X16);
       }
   }
-  registerIcon('icon-bell-and-comment', IconBellAndComment);
+  registerIconSvg('icon-bell-and-comment', IconBellAndComment);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellAndMessage' icon
    */
-  class IconBellAndMessage extends Icon {
+  class IconBellAndMessage extends IconSvg {
       constructor() {
           super(bellAndMessage16X16);
       }
   }
-  registerIcon('icon-bell-and-message', IconBellAndMessage);
+  registerIconSvg('icon-bell-and-message', IconBellAndMessage);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellCheck' icon
    */
-  class IconBellCheck extends Icon {
+  class IconBellCheck extends IconSvg {
       constructor() {
           super(bellCheck16X16);
       }
   }
-  registerIcon('icon-bell-check', IconBellCheck);
+  registerIconSvg('icon-bell-check', IconBellCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellCircle' icon
    */
-  class IconBellCircle extends Icon {
+  class IconBellCircle extends IconSvg {
       constructor() {
           super(bellCircle16X16);
       }
   }
-  registerIcon('icon-bell-circle', IconBellCircle);
+  registerIconSvg('icon-bell-circle', IconBellCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellOn' icon
    */
-  class IconBellOn extends Icon {
+  class IconBellOn extends IconSvg {
       constructor() {
           super(bellOn16X16);
       }
   }
-  registerIcon('icon-bell-on', IconBellOn);
+  registerIconSvg('icon-bell-on', IconBellOn);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'bellSolidCircle' icon
    */
-  class IconBellSolidCircle extends Icon {
+  class IconBellSolidCircle extends IconSvg {
       constructor() {
           super(bellSolidCircle16X16);
       }
   }
-  registerIcon('icon-bell-solid-circle', IconBellSolidCircle);
+  registerIconSvg('icon-bell-solid-circle', IconBellSolidCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'blockWithRibbon' icon
    */
-  class IconBlockWithRibbon extends Icon {
+  class IconBlockWithRibbon extends IconSvg {
       constructor() {
           super(blockWithRibbon16X16);
       }
   }
-  registerIcon('icon-block-with-ribbon', IconBlockWithRibbon);
+  registerIconSvg('icon-block-with-ribbon', IconBlockWithRibbon);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'boldB' icon
    */
-  class IconBoldB extends Icon {
+  class IconBoldB extends IconSvg {
       constructor() {
           super(boldB16X16);
       }
   }
-  registerIcon('icon-bold-b', IconBoldB);
+  registerIconSvg('icon-bold-b', IconBoldB);
   const iconBoldBTag = 'nimble-icon-bold-b';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -23122,1092 +23136,1104 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'bookMagnifyingGlass' icon
    */
-  class IconBookMagnifyingGlass extends Icon {
+  class IconBookMagnifyingGlass extends IconSvg {
       constructor() {
           super(bookMagnifyingGlass16X16);
       }
   }
-  registerIcon('icon-book-magnifying-glass', IconBookMagnifyingGlass);
+  registerIconSvg('icon-book-magnifying-glass', IconBookMagnifyingGlass);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarArrowsRotateReverseDot' icon
    */
-  class IconCalendarArrowsRotateReverseDot extends Icon {
+  class IconCalendarArrowsRotateReverseDot extends IconSvg {
       constructor() {
           super(calendarArrowsRotateReverseDot16X16);
       }
   }
-  registerIcon('icon-calendar-arrows-rotate-reverse-dot', IconCalendarArrowsRotateReverseDot);
+  registerIconSvg('icon-calendar-arrows-rotate-reverse-dot', IconCalendarArrowsRotateReverseDot);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarCheckLines' icon
    */
-  class IconCalendarCheckLines extends Icon {
+  class IconCalendarCheckLines extends IconSvg {
       constructor() {
           super(calendarCheckLines16X16);
       }
   }
-  registerIcon('icon-calendar-check-lines', IconCalendarCheckLines);
+  registerIconSvg('icon-calendar-check-lines', IconCalendarCheckLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarCircleExclamation' icon
    */
-  class IconCalendarCircleExclamation extends Icon {
+  class IconCalendarCircleExclamation extends IconSvg {
       constructor() {
           super(calendarCircleExclamation16X16);
       }
   }
-  registerIcon('icon-calendar-circle-exclamation', IconCalendarCircleExclamation);
+  registerIconSvg('icon-calendar-circle-exclamation', IconCalendarCircleExclamation);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarClock' icon
    */
-  class IconCalendarClock extends Icon {
+  class IconCalendarClock extends IconSvg {
       constructor() {
           super(calendarClock16X16);
       }
   }
-  registerIcon('icon-calendar-clock', IconCalendarClock);
+  registerIconSvg('icon-calendar-clock', IconCalendarClock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarDay' icon
    */
-  class IconCalendarDay extends Icon {
+  class IconCalendarDay extends IconSvg {
       constructor() {
           super(calendarDay16X16);
       }
   }
-  registerIcon('icon-calendar-day', IconCalendarDay);
+  registerIconSvg('icon-calendar-day', IconCalendarDay);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarDayOutline' icon
    */
-  class IconCalendarDayOutline extends Icon {
+  class IconCalendarDayOutline extends IconSvg {
       constructor() {
           super(calendarDayOutline16X16);
       }
   }
-  registerIcon('icon-calendar-day-outline', IconCalendarDayOutline);
+  registerIconSvg('icon-calendar-day-outline', IconCalendarDayOutline);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarDays' icon
    */
-  class IconCalendarDays extends Icon {
+  class IconCalendarDays extends IconSvg {
       constructor() {
           super(calendarDays16X16);
       }
   }
-  registerIcon('icon-calendar-days', IconCalendarDays);
+  registerIconSvg('icon-calendar-days', IconCalendarDays);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarLines' icon
    */
-  class IconCalendarLines extends Icon {
+  class IconCalendarLines extends IconSvg {
       constructor() {
           super(calendarLines16X16);
       }
   }
-  registerIcon('icon-calendar-lines', IconCalendarLines);
+  registerIconSvg('icon-calendar-lines', IconCalendarLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarRectangle' icon
    */
-  class IconCalendarRectangle extends Icon {
+  class IconCalendarRectangle extends IconSvg {
       constructor() {
           super(calendarRectangle16X16);
       }
   }
-  registerIcon('icon-calendar-rectangle', IconCalendarRectangle);
+  registerIconSvg('icon-calendar-rectangle', IconCalendarRectangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calendarWeek' icon
    */
-  class IconCalendarWeek extends Icon {
+  class IconCalendarWeek extends IconSvg {
       constructor() {
           super(calendarWeek16X16);
       }
   }
-  registerIcon('icon-calendar-week', IconCalendarWeek);
+  registerIconSvg('icon-calendar-week', IconCalendarWeek);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'calipers' icon
    */
-  class IconCalipers extends Icon {
+  class IconCalipers extends IconSvg {
       constructor() {
           super(calipers16X16);
       }
   }
-  registerIcon('icon-calipers', IconCalipers);
+  registerIconSvg('icon-calipers', IconCalipers);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'camera' icon
    */
-  class IconCamera extends Icon {
+  class IconCamera extends IconSvg {
       constructor() {
           super(camera16X16);
       }
   }
-  registerIcon('icon-camera', IconCamera);
+  registerIconSvg('icon-camera', IconCamera);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'chartDiagram' icon
    */
-  class IconChartDiagram extends Icon {
+  class IconChartDiagram extends IconSvg {
       constructor() {
           super(chartDiagram16X16);
       }
   }
-  registerIcon('icon-chart-diagram', IconChartDiagram);
+  registerIconSvg('icon-chart-diagram', IconChartDiagram);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'chartDiagramChildFocus' icon
    */
-  class IconChartDiagramChildFocus extends Icon {
+  class IconChartDiagramChildFocus extends IconSvg {
       constructor() {
           super(chartDiagramChildFocus16X16);
       }
   }
-  registerIcon('icon-chart-diagram-child-focus', IconChartDiagramChildFocus);
+  registerIconSvg('icon-chart-diagram-child-focus', IconChartDiagramChildFocus);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'chartDiagramParentFocus' icon
    */
-  class IconChartDiagramParentFocus extends Icon {
+  class IconChartDiagramParentFocus extends IconSvg {
       constructor() {
           super(chartDiagramParentFocus16X16);
       }
   }
-  registerIcon('icon-chart-diagram-parent-focus', IconChartDiagramParentFocus);
+  registerIconSvg('icon-chart-diagram-parent-focus', IconChartDiagramParentFocus);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'chartDiagramParentFocusTwoChild' icon
    */
-  class IconChartDiagramParentFocusTwoChild extends Icon {
+  class IconChartDiagramParentFocusTwoChild extends IconSvg {
       constructor() {
           super(chartDiagramParentFocusTwoChild16X16);
       }
   }
-  registerIcon('icon-chart-diagram-parent-focus-two-child', IconChartDiagramParentFocusTwoChild);
+  registerIconSvg('icon-chart-diagram-parent-focus-two-child', IconChartDiagramParentFocusTwoChild);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'check' icon
    */
-  class IconCheck extends Icon {
+  class IconCheck extends IconSvg {
       constructor() {
           super(check16X16);
       }
   }
-  registerIcon('icon-check', IconCheck);
+  registerIconSvg('icon-check', IconCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'checkDot' icon
    */
-  class IconCheckDot extends Icon {
+  class IconCheckDot extends IconSvg {
       constructor() {
           super(checkDot16X16);
       }
   }
-  registerIcon('icon-check-dot', IconCheckDot);
+  registerIconSvg('icon-check-dot', IconCheckDot);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circle' icon
    */
-  class IconCircle extends Icon {
+  class IconCircle extends IconSvg {
       constructor() {
           super(circle16X16);
       }
   }
-  registerIcon('icon-circle', IconCircle);
+  registerIconSvg('icon-circle', IconCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleBroken' icon
    */
-  class IconCircleBroken extends Icon {
+  class IconCircleBroken extends IconSvg {
       constructor() {
           super(circleBroken16X16);
       }
   }
-  registerIcon('icon-circle-broken', IconCircleBroken);
+  registerIconSvg('icon-circle-broken', IconCircleBroken);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleCheck' icon
    */
-  class IconCircleCheck extends Icon {
+  class IconCircleCheck extends IconSvg {
       constructor() {
           super(circleCheck16X16);
       }
   }
-  registerIcon('icon-circle-check', IconCircleCheck);
+  registerIconSvg('icon-circle-check', IconCircleCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleFilled' icon
    */
-  class IconCircleFilled extends Icon {
+  class IconCircleFilled extends IconSvg {
       constructor() {
           super(circleFilled16X16);
       }
   }
-  registerIcon('icon-circle-filled', IconCircleFilled);
+  registerIconSvg('icon-circle-filled', IconCircleFilled);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleMinus' icon
    */
-  class IconCircleMinus extends Icon {
+  class IconCircleMinus extends IconSvg {
       constructor() {
           super(circleMinus16X16);
       }
   }
-  registerIcon('icon-circle-minus', IconCircleMinus);
+  registerIconSvg('icon-circle-minus', IconCircleMinus);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circlePartialBroken' icon
    */
-  class IconCirclePartialBroken extends Icon {
+  class IconCirclePartialBroken extends IconSvg {
       constructor() {
           super(circlePartialBroken16X16);
       }
   }
-  registerIcon('icon-circle-partial-broken', IconCirclePartialBroken);
+  registerIconSvg('icon-circle-partial-broken', IconCirclePartialBroken);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleSlash' icon
    */
-  class IconCircleSlash extends Icon {
+  class IconCircleSlash extends IconSvg {
       constructor() {
           super(circleSlash16X16);
       }
   }
-  registerIcon('icon-circle-slash', IconCircleSlash);
+  registerIconSvg('icon-circle-slash', IconCircleSlash);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'circleX' icon
    */
-  class IconCircleX extends Icon {
+  class IconCircleX extends IconSvg {
       constructor() {
           super(circleX16X16);
       }
   }
-  registerIcon('icon-circle-x', IconCircleX);
+  registerIconSvg('icon-circle-x', IconCircleX);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clipboard' icon
    */
-  class IconClipboard extends Icon {
+  class IconClipboard extends IconSvg {
       constructor() {
           super(clipboard16X16);
       }
   }
-  registerIcon('icon-clipboard', IconClipboard);
+  registerIconSvg('icon-clipboard', IconClipboard);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clock' icon
    */
-  class IconClock extends Icon {
+  class IconClock extends IconSvg {
       constructor() {
           super(clock16X16);
       }
   }
-  registerIcon('icon-clock', IconClock);
+  registerIconSvg('icon-clock', IconClock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clockCog' icon
    */
-  class IconClockCog extends Icon {
+  class IconClockCog extends IconSvg {
       constructor() {
           super(clockCog16X16);
       }
   }
-  registerIcon('icon-clock-cog', IconClockCog);
+  registerIconSvg('icon-clock-cog', IconClockCog);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clockExclamation' icon
    */
-  class IconClockExclamation extends Icon {
+  class IconClockExclamation extends IconSvg {
       constructor() {
           super(clockExclamation16X16);
       }
   }
-  registerIcon('icon-clock-exclamation', IconClockExclamation);
+  registerIconSvg('icon-clock-exclamation', IconClockExclamation);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clockTriangle' icon
    */
-  class IconClockTriangle extends Icon {
+  class IconClockTriangle extends IconSvg {
       constructor() {
           super(clockTriangle16X16);
       }
   }
-  registerIcon('icon-clock-triangle', IconClockTriangle);
+  registerIconSvg('icon-clock-triangle', IconClockTriangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'clone' icon
    */
-  class IconClone extends Icon {
+  class IconClone extends IconSvg {
       constructor() {
           super(clone16X16);
       }
   }
-  registerIcon('icon-clone', IconClone);
+  registerIconSvg('icon-clone', IconClone);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cloud' icon
    */
-  class IconCloud extends Icon {
+  class IconCloud extends IconSvg {
       constructor() {
           super(cloud16X16);
       }
   }
-  registerIcon('icon-cloud', IconCloud);
+  registerIconSvg('icon-cloud', IconCloud);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cloudUpload' icon
    */
-  class IconCloudUpload extends Icon {
+  class IconCloudUpload extends IconSvg {
       constructor() {
           super(cloudUpload16X16);
       }
   }
-  registerIcon('icon-cloud-upload', IconCloudUpload);
+  registerIconSvg('icon-cloud-upload', IconCloudUpload);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cloudWithArrow' icon
    */
-  class IconCloudWithArrow extends Icon {
+  class IconCloudWithArrow extends IconSvg {
       constructor() {
           super(cloudWithArrow16X16);
       }
   }
-  registerIcon('icon-cloud-with-arrow', IconCloudWithArrow);
+  registerIconSvg('icon-cloud-with-arrow', IconCloudWithArrow);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cog' icon
    */
-  class IconCog extends Icon {
+  class IconCog extends IconSvg {
       constructor() {
           super(cog16X16);
       }
   }
-  registerIcon('icon-cog', IconCog);
+  registerIconSvg('icon-cog', IconCog);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cogDatabase' icon
    */
-  class IconCogDatabase extends Icon {
+  class IconCogDatabase extends IconSvg {
       constructor() {
           super(cogDatabase16X16);
       }
   }
-  registerIcon('icon-cog-database', IconCogDatabase);
+  registerIconSvg('icon-cog-database', IconCogDatabase);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cogDatabaseInset' icon
    */
-  class IconCogDatabaseInset extends Icon {
+  class IconCogDatabaseInset extends IconSvg {
       constructor() {
           super(cogDatabaseInset16X16);
       }
   }
-  registerIcon('icon-cog-database-inset', IconCogDatabaseInset);
+  registerIconSvg('icon-cog-database-inset', IconCogDatabaseInset);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cogSmallCog' icon
    */
-  class IconCogSmallCog extends Icon {
+  class IconCogSmallCog extends IconSvg {
       constructor() {
           super(cogSmallCog16X16);
       }
   }
-  registerIcon('icon-cog-small-cog', IconCogSmallCog);
+  registerIconSvg('icon-cog-small-cog', IconCogSmallCog);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'cogZoomed' icon
    */
-  class IconCogZoomed extends Icon {
+  class IconCogZoomed extends IconSvg {
       constructor() {
           super(cogZoomed16X16);
       }
   }
-  registerIcon('icon-cog-zoomed', IconCogZoomed);
+  registerIconSvg('icon-cog-zoomed', IconCogZoomed);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'comment' icon
    */
-  class IconComment extends Icon {
+  class IconComment extends IconSvg {
       constructor() {
           super(comment16X16);
       }
   }
-  registerIcon('icon-comment', IconComment);
+  registerIconSvg('icon-comment', IconComment);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'computerAndMonitor' icon
    */
-  class IconComputerAndMonitor extends Icon {
+  class IconComputerAndMonitor extends IconSvg {
       constructor() {
           super(computerAndMonitor16X16);
       }
   }
-  registerIcon('icon-computer-and-monitor', IconComputerAndMonitor);
+  registerIconSvg('icon-computer-and-monitor', IconComputerAndMonitor);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'copy' icon
    */
-  class IconCopy extends Icon {
+  class IconCopy extends IconSvg {
       constructor() {
           super(copy16X16);
       }
   }
-  registerIcon('icon-copy', IconCopy);
+  registerIconSvg('icon-copy', IconCopy);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'copyText' icon
    */
-  class IconCopyText extends Icon {
+  class IconCopyText extends IconSvg {
       constructor() {
           super(copyText16X16);
       }
   }
-  registerIcon('icon-copy-text', IconCopyText);
+  registerIconSvg('icon-copy-text', IconCopyText);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dashboardBuilder' icon
    */
-  class IconDashboardBuilder extends Icon {
+  class IconDashboardBuilder extends IconSvg {
       constructor() {
           super(dashboardBuilder16X16);
       }
   }
-  registerIcon('icon-dashboard-builder', IconDashboardBuilder);
+  registerIconSvg('icon-dashboard-builder', IconDashboardBuilder);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dashboardBuilderLegend' icon
    */
-  class IconDashboardBuilderLegend extends Icon {
+  class IconDashboardBuilderLegend extends IconSvg {
       constructor() {
           super(dashboardBuilderLegend16X16);
       }
   }
-  registerIcon('icon-dashboard-builder-legend', IconDashboardBuilderLegend);
+  registerIconSvg('icon-dashboard-builder-legend', IconDashboardBuilderLegend);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dashboardBuilderTemplates' icon
    */
-  class IconDashboardBuilderTemplates extends Icon {
+  class IconDashboardBuilderTemplates extends IconSvg {
       constructor() {
           super(dashboardBuilderTemplates16X16);
       }
   }
-  registerIcon('icon-dashboard-builder-templates', IconDashboardBuilderTemplates);
+  registerIconSvg('icon-dashboard-builder-templates', IconDashboardBuilderTemplates);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dashboardBuilderTile' icon
    */
-  class IconDashboardBuilderTile extends Icon {
+  class IconDashboardBuilderTile extends IconSvg {
       constructor() {
           super(dashboardBuilderTile16X16);
       }
   }
-  registerIcon('icon-dashboard-builder-tile', IconDashboardBuilderTile);
+  registerIconSvg('icon-dashboard-builder-tile', IconDashboardBuilderTile);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'database' icon
    */
-  class IconDatabase extends Icon {
+  class IconDatabase extends IconSvg {
       constructor() {
           super(database16X16);
       }
   }
-  registerIcon('icon-database', IconDatabase);
+  registerIconSvg('icon-database', IconDatabase);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'databaseCheck' icon
    */
-  class IconDatabaseCheck extends Icon {
+  class IconDatabaseCheck extends IconSvg {
       constructor() {
           super(databaseCheck16X16);
       }
   }
-  registerIcon('icon-database-check', IconDatabaseCheck);
+  registerIconSvg('icon-database-check', IconDatabaseCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'debug' icon
    */
-  class IconDebug extends Icon {
+  class IconDebug extends IconSvg {
       constructor() {
           super(debug16X16);
       }
   }
-  registerIcon('icon-debug', IconDebug);
+  registerIconSvg('icon-debug', IconDebug);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'desktop' icon
    */
-  class IconDesktop extends Icon {
+  class IconDesktop extends IconSvg {
       constructor() {
           super(desktop16X16);
       }
   }
-  registerIcon('icon-desktop', IconDesktop);
+  registerIconSvg('icon-desktop', IconDesktop);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'diadem' icon
    */
-  class IconDiadem extends Icon {
+  class IconDiadem extends IconSvg {
       constructor() {
           super(diadem16X16);
       }
   }
-  registerIcon('icon-diadem', IconDiadem);
+  registerIconSvg('icon-diadem', IconDiadem);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'donutChart' icon
    */
-  class IconDonutChart extends Icon {
+  class IconDonutChart extends IconSvg {
       constructor() {
           super(donutChart16X16);
       }
   }
-  registerIcon('icon-donut-chart', IconDonutChart);
+  registerIconSvg('icon-donut-chart', IconDonutChart);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dotSolidDotStroke' icon
    */
-  class IconDotSolidDotStroke extends Icon {
+  class IconDotSolidDotStroke extends IconSvg {
       constructor() {
           super(dotSolidDotStroke16X16);
       }
   }
-  registerIcon('icon-dot-solid-dot-stroke', IconDotSolidDotStroke);
+  registerIconSvg('icon-dot-solid-dot-stroke', IconDotSolidDotStroke);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'dotSolidDotStrokeMeasurement' icon
    */
-  class IconDotSolidDotStrokeMeasurement extends Icon {
+  class IconDotSolidDotStrokeMeasurement extends IconSvg {
       constructor() {
           super(dotSolidDotStrokeMeasurement16X16);
       }
   }
-  registerIcon('icon-dot-solid-dot-stroke-measurement', IconDotSolidDotStrokeMeasurement);
+  registerIconSvg('icon-dot-solid-dot-stroke-measurement', IconDotSolidDotStrokeMeasurement);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'downRightFromSquare' icon
    */
-  class IconDownRightFromSquare extends Icon {
+  class IconDownRightFromSquare extends IconSvg {
       constructor() {
           super(downRightFromSquare16X16);
       }
   }
-  registerIcon('icon-down-right-from-square', IconDownRightFromSquare);
+  registerIconSvg('icon-down-right-from-square', IconDownRightFromSquare);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'download' icon
    */
-  class IconDownload extends Icon {
+  class IconDownload extends IconSvg {
       constructor() {
           super(download16X16);
       }
   }
-  registerIcon('icon-download', IconDownload);
+  registerIconSvg('icon-download', IconDownload);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'electronicChipZoomed' icon
    */
-  class IconElectronicChipZoomed extends Icon {
+  class IconElectronicChipZoomed extends IconSvg {
       constructor() {
           super(electronicChipZoomed16X16);
       }
   }
-  registerIcon('icon-electronic-chip-zoomed', IconElectronicChipZoomed);
+  registerIconSvg('icon-electronic-chip-zoomed', IconElectronicChipZoomed);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'eye' icon
    */
-  class IconEye extends Icon {
+  class IconEye extends IconSvg {
       constructor() {
           super(eye16X16);
       }
   }
-  registerIcon('icon-eye', IconEye);
+  registerIconSvg('icon-eye', IconEye);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'eyeDash' icon
    */
-  class IconEyeDash extends Icon {
+  class IconEyeDash extends IconSvg {
       constructor() {
           super(eyeDash16X16);
       }
   }
-  registerIcon('icon-eye-dash', IconEyeDash);
+  registerIconSvg('icon-eye-dash', IconEyeDash);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'fancyA' icon
    */
-  class IconFancyA extends Icon {
+  class IconFancyA extends IconSvg {
       constructor() {
           super(fancyA16X16);
       }
   }
-  registerIcon('icon-fancy-a', IconFancyA);
+  registerIconSvg('icon-fancy-a', IconFancyA);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'file' icon
    */
-  class IconFile extends Icon {
+  class IconFile extends IconSvg {
       constructor() {
           super(file16X16);
       }
   }
-  registerIcon('icon-file', IconFile);
+  registerIconSvg('icon-file', IconFile);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'fileArrowCurvedRight' icon
    */
-  class IconFileArrowCurvedRight extends Icon {
+  class IconFileArrowCurvedRight extends IconSvg {
       constructor() {
           super(fileArrowCurvedRight16X16);
       }
   }
-  registerIcon('icon-file-arrow-curved-right', IconFileArrowCurvedRight);
+  registerIconSvg('icon-file-arrow-curved-right', IconFileArrowCurvedRight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'fileDrawer' icon
    */
-  class IconFileDrawer extends Icon {
+  class IconFileDrawer extends IconSvg {
       constructor() {
           super(fileDrawer16X16);
       }
   }
-  registerIcon('icon-file-drawer', IconFileDrawer);
+  registerIconSvg('icon-file-drawer', IconFileDrawer);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'fileSearch' icon
    */
-  class IconFileSearch extends Icon {
+  class IconFileSearch extends IconSvg {
       constructor() {
           super(fileSearch16X16);
       }
   }
-  registerIcon('icon-file-search', IconFileSearch);
+  registerIconSvg('icon-file-search', IconFileSearch);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'filter' icon
    */
-  class IconFilter extends Icon {
+  class IconFilter extends IconSvg {
       constructor() {
           super(filter16X16);
       }
   }
-  registerIcon('icon-filter', IconFilter);
+  registerIconSvg('icon-filter', IconFilter);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'floppyDisk' icon
    */
-  class IconFloppyDisk extends Icon {
+  class IconFloppyDisk extends IconSvg {
       constructor() {
           super(floppyDisk16X16);
       }
   }
-  registerIcon('icon-floppy-disk', IconFloppyDisk);
+  registerIconSvg('icon-floppy-disk', IconFloppyDisk);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'floppyDiskCheckmark' icon
    */
-  class IconFloppyDiskCheckmark extends Icon {
+  class IconFloppyDiskCheckmark extends IconSvg {
       constructor() {
           super(floppyDiskCheckmark16X16);
       }
   }
-  registerIcon('icon-floppy-disk-checkmark', IconFloppyDiskCheckmark);
+  registerIconSvg('icon-floppy-disk-checkmark', IconFloppyDiskCheckmark);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'floppyDiskPen' icon
    */
-  class IconFloppyDiskPen extends Icon {
+  class IconFloppyDiskPen extends IconSvg {
       constructor() {
           super(floppyDiskPen16X16);
       }
   }
-  registerIcon('icon-floppy-disk-pen', IconFloppyDiskPen);
+  registerIconSvg('icon-floppy-disk-pen', IconFloppyDiskPen);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'floppyDiskStarArrowRight' icon
    */
-  class IconFloppyDiskStarArrowRight extends Icon {
+  class IconFloppyDiskStarArrowRight extends IconSvg {
       constructor() {
           super(floppyDiskStarArrowRight16X16);
       }
   }
-  registerIcon('icon-floppy-disk-star-arrow-right', IconFloppyDiskStarArrowRight);
+  registerIconSvg('icon-floppy-disk-star-arrow-right', IconFloppyDiskStarArrowRight);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'floppyDiskThreeDots' icon
    */
-  class IconFloppyDiskThreeDots extends Icon {
+  class IconFloppyDiskThreeDots extends IconSvg {
       constructor() {
           super(floppyDiskThreeDots16X16);
       }
   }
-  registerIcon('icon-floppy-disk-three-dots', IconFloppyDiskThreeDots);
+  registerIconSvg('icon-floppy-disk-three-dots', IconFloppyDiskThreeDots);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'folder' icon
    */
-  class IconFolder extends Icon {
+  class IconFolder extends IconSvg {
       constructor() {
           super(folder16X16);
       }
   }
-  registerIcon('icon-folder', IconFolder);
+  registerIconSvg('icon-folder', IconFolder);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'folderOpen' icon
    */
-  class IconFolderOpen extends Icon {
+  class IconFolderOpen extends IconSvg {
       constructor() {
           super(folderOpen16X16);
       }
   }
-  registerIcon('icon-folder-open', IconFolderOpen);
+  registerIconSvg('icon-folder-open', IconFolderOpen);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'forklift' icon
+   */
+  class IconForklift extends IconSvg {
+      constructor() {
+          super(forklift16X16);
+      }
+  }
+  registerIconSvg('icon-forklift', IconForklift);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'forwardSlash' icon
    */
-  class IconForwardSlash extends Icon {
+  class IconForwardSlash extends IconSvg {
       constructor() {
           super(forwardSlash16X16);
       }
   }
-  registerIcon('icon-forward-slash', IconForwardSlash);
+  registerIconSvg('icon-forward-slash', IconForwardSlash);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'fourDotsSquare' icon
    */
-  class IconFourDotsSquare extends Icon {
+  class IconFourDotsSquare extends IconSvg {
       constructor() {
           super(fourDotsSquare16X16);
       }
   }
-  registerIcon('icon-four-dots-square', IconFourDotsSquare);
+  registerIconSvg('icon-four-dots-square', IconFourDotsSquare);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'function' icon
    */
-  class IconFunction extends Icon {
+  class IconFunction extends IconSvg {
       constructor() {
           super(function16X16);
       }
   }
-  registerIcon('icon-function', IconFunction);
+  registerIconSvg('icon-function', IconFunction);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'gaugeSimple' icon
    */
-  class IconGaugeSimple extends Icon {
+  class IconGaugeSimple extends IconSvg {
       constructor() {
           super(gaugeSimple16X16);
       }
   }
-  registerIcon('icon-gauge-simple', IconGaugeSimple);
+  registerIconSvg('icon-gauge-simple', IconGaugeSimple);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'gridThreeByThree' icon
    */
-  class IconGridThreeByThree extends Icon {
+  class IconGridThreeByThree extends IconSvg {
       constructor() {
           super(gridThreeByThree16X16);
       }
   }
-  registerIcon('icon-grid-three-by-three', IconGridThreeByThree);
+  registerIconSvg('icon-grid-three-by-three', IconGridThreeByThree);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'gridTwoByTwo' icon
    */
-  class IconGridTwoByTwo extends Icon {
+  class IconGridTwoByTwo extends IconSvg {
       constructor() {
           super(gridTwoByTwo16X16);
       }
   }
-  registerIcon('icon-grid-two-by-two', IconGridTwoByTwo);
+  registerIconSvg('icon-grid-two-by-two', IconGridTwoByTwo);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'hammer' icon
    */
-  class IconHammer extends Icon {
+  class IconHammer extends IconSvg {
       constructor() {
           super(hammer16X16);
       }
   }
-  registerIcon('icon-hammer', IconHammer);
+  registerIconSvg('icon-hammer', IconHammer);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'hashtag' icon
    */
-  class IconHashtag extends Icon {
+  class IconHashtag extends IconSvg {
       constructor() {
           super(hashtag16X16);
       }
   }
-  registerIcon('icon-hashtag', IconHashtag);
+  registerIconSvg('icon-hashtag', IconHashtag);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'home' icon
    */
-  class IconHome extends Icon {
+  class IconHome extends IconSvg {
       constructor() {
           super(home16X16);
       }
   }
-  registerIcon('icon-home', IconHome);
+  registerIconSvg('icon-home', IconHome);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'horizontalTriangleOutline' icon
    */
-  class IconHorizontalTriangleOutline extends Icon {
+  class IconHorizontalTriangleOutline extends IconSvg {
       constructor() {
           super(horizontalTriangleOutline16X16);
       }
   }
-  registerIcon('icon-horizontal-triangle-outline', IconHorizontalTriangleOutline);
+  registerIconSvg('icon-horizontal-triangle-outline', IconHorizontalTriangleOutline);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'hourglass' icon
    */
-  class IconHourglass extends Icon {
+  class IconHourglass extends IconSvg {
       constructor() {
           super(hourglass16X16);
       }
   }
-  registerIcon('icon-hourglass', IconHourglass);
+  registerIconSvg('icon-hourglass', IconHourglass);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'indent' icon
    */
-  class IconIndent extends Icon {
+  class IconIndent extends IconSvg {
       constructor() {
           super(indent16X16);
       }
   }
-  registerIcon('icon-indent', IconIndent);
+  registerIconSvg('icon-indent', IconIndent);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'indeterminantCheckbox' icon
    */
-  class IconIndeterminantCheckbox extends Icon {
+  class IconIndeterminantCheckbox extends IconSvg {
       constructor() {
           super(indeterminantCheckbox16X16);
       }
   }
-  registerIcon('icon-indeterminant-checkbox', IconIndeterminantCheckbox);
+  registerIconSvg('icon-indeterminant-checkbox', IconIndeterminantCheckbox);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'infoCircle' icon
    */
-  class IconInfoCircle extends Icon {
+  class IconInfoCircle extends IconSvg {
       constructor() {
           super(infoCircle16X16);
       }
   }
-  registerIcon('icon-info-circle', IconInfoCircle);
+  registerIconSvg('icon-info-circle', IconInfoCircle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'inwardSquaresThree' icon
    */
-  class IconInwardSquaresThree extends Icon {
+  class IconInwardSquaresThree extends IconSvg {
       constructor() {
           super(inwardSquaresThree16X16);
       }
   }
-  registerIcon('icon-inward-squares-three', IconInwardSquaresThree);
+  registerIconSvg('icon-inward-squares-three', IconInwardSquaresThree);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'italicI' icon
    */
-  class IconItalicI extends Icon {
+  class IconItalicI extends IconSvg {
       constructor() {
           super(italicI16X16);
       }
   }
-  registerIcon('icon-italic-i', IconItalicI);
+  registerIconSvg('icon-italic-i', IconItalicI);
   const iconItalicITag = 'nimble-icon-italic-i';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24215,96 +24241,96 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'key' icon
    */
-  class IconKey extends Icon {
+  class IconKey extends IconSvg {
       constructor() {
           super(key16X16);
       }
   }
-  registerIcon('icon-key', IconKey);
+  registerIconSvg('icon-key', IconKey);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'laptop' icon
    */
-  class IconLaptop extends Icon {
+  class IconLaptop extends IconSvg {
       constructor() {
           super(laptop16X16);
       }
   }
-  registerIcon('icon-laptop', IconLaptop);
+  registerIconSvg('icon-laptop', IconLaptop);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'layerGroup' icon
    */
-  class IconLayerGroup extends Icon {
+  class IconLayerGroup extends IconSvg {
       constructor() {
           super(layerGroup16X16);
       }
   }
-  registerIcon('icon-layer-group', IconLayerGroup);
+  registerIconSvg('icon-layer-group', IconLayerGroup);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'lightbulb' icon
    */
-  class IconLightbulb extends Icon {
+  class IconLightbulb extends IconSvg {
       constructor() {
           super(lightbulb16X16);
       }
   }
-  registerIcon('icon-lightbulb', IconLightbulb);
+  registerIconSvg('icon-lightbulb', IconLightbulb);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'lightningBolt' icon
    */
-  class IconLightningBolt extends Icon {
+  class IconLightningBolt extends IconSvg {
       constructor() {
           super(lightningBolt16X16);
       }
   }
-  registerIcon('icon-lightning-bolt', IconLightningBolt);
+  registerIconSvg('icon-lightning-bolt', IconLightningBolt);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'link' icon
    */
-  class IconLink extends Icon {
+  class IconLink extends IconSvg {
       constructor() {
           super(link16X16);
       }
   }
-  registerIcon('icon-link', IconLink);
+  registerIconSvg('icon-link', IconLink);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'linkCancel' icon
    */
-  class IconLinkCancel extends Icon {
+  class IconLinkCancel extends IconSvg {
       constructor() {
           super(linkCancel16X16);
       }
   }
-  registerIcon('icon-link-cancel', IconLinkCancel);
+  registerIconSvg('icon-link-cancel', IconLinkCancel);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'list' icon
    */
-  class IconList extends Icon {
+  class IconList extends IconSvg {
       constructor() {
           super(list16X16);
       }
   }
-  registerIcon('icon-list', IconList);
+  registerIconSvg('icon-list', IconList);
   const iconListTag = 'nimble-icon-list';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24312,48 +24338,48 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'listTree' icon
    */
-  class IconListTree extends Icon {
+  class IconListTree extends IconSvg {
       constructor() {
           super(listTree16X16);
       }
   }
-  registerIcon('icon-list-tree', IconListTree);
+  registerIconSvg('icon-list-tree', IconListTree);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'listTreeDatabase' icon
    */
-  class IconListTreeDatabase extends Icon {
+  class IconListTreeDatabase extends IconSvg {
       constructor() {
           super(listTreeDatabase16X16);
       }
   }
-  registerIcon('icon-list-tree-database', IconListTreeDatabase);
+  registerIconSvg('icon-list-tree-database', IconListTreeDatabase);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'lock' icon
    */
-  class IconLock extends Icon {
+  class IconLock extends IconSvg {
       constructor() {
           super(lock16X16);
       }
   }
-  registerIcon('icon-lock', IconLock);
+  registerIconSvg('icon-lock', IconLock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'magnifyingGlass' icon
    */
-  class IconMagnifyingGlass extends Icon {
+  class IconMagnifyingGlass extends IconSvg {
       constructor() {
           super(magnifyingGlass16X16);
       }
   }
-  registerIcon('icon-magnifying-glass', IconMagnifyingGlass);
+  registerIconSvg('icon-magnifying-glass', IconMagnifyingGlass);
   const iconMagnifyingGlassTag = 'nimble-icon-magnifying-glass';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24361,84 +24387,84 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'markdown' icon
    */
-  class IconMarkdown extends Icon {
+  class IconMarkdown extends IconSvg {
       constructor() {
           super(markdown16X16);
       }
   }
-  registerIcon('icon-markdown', IconMarkdown);
+  registerIconSvg('icon-markdown', IconMarkdown);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'message' icon
    */
-  class IconMessage extends Icon {
+  class IconMessage extends IconSvg {
       constructor() {
           super(message16X16);
       }
   }
-  registerIcon('icon-message', IconMessage);
+  registerIconSvg('icon-message', IconMessage);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'messageBot' icon
    */
-  class IconMessageBot extends Icon {
+  class IconMessageBot extends IconSvg {
       constructor() {
           super(messageBot16X16);
       }
   }
-  registerIcon('icon-message-bot', IconMessageBot);
+  registerIconSvg('icon-message-bot', IconMessageBot);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'messagesSparkle' icon
    */
-  class IconMessagesSparkle extends Icon {
+  class IconMessagesSparkle extends IconSvg {
       constructor() {
           super(messagesSparkle16X16);
       }
   }
-  registerIcon('icon-messages-sparkle', IconMessagesSparkle);
+  registerIconSvg('icon-messages-sparkle', IconMessagesSparkle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'microphone' icon
    */
-  class IconMicrophone extends Icon {
+  class IconMicrophone extends IconSvg {
       constructor() {
           super(microphone16X16);
       }
   }
-  registerIcon('icon-microphone', IconMicrophone);
+  registerIconSvg('icon-microphone', IconMicrophone);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'minus' icon
    */
-  class IconMinus extends Icon {
+  class IconMinus extends IconSvg {
       constructor() {
           super(minus16X16);
       }
   }
-  registerIcon('icon-minus', IconMinus);
+  registerIconSvg('icon-minus', IconMinus);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'minusWide' icon
    */
-  class IconMinusWide extends Icon {
+  class IconMinusWide extends IconSvg {
       constructor() {
           super(minusWide16X16);
       }
   }
-  registerIcon('icon-minus-wide', IconMinusWide);
+  registerIconSvg('icon-minus-wide', IconMinusWide);
   const iconMinusWideTag = 'nimble-icon-minus-wide';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24446,60 +24472,60 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'mobile' icon
    */
-  class IconMobile extends Icon {
+  class IconMobile extends IconSvg {
       constructor() {
           super(mobile16X16);
       }
   }
-  registerIcon('icon-mobile', IconMobile);
+  registerIconSvg('icon-mobile', IconMobile);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'mountainSun' icon
    */
-  class IconMountainSun extends Icon {
+  class IconMountainSun extends IconSvg {
       constructor() {
           super(mountainSun16X16);
       }
   }
-  registerIcon('icon-mountain-sun', IconMountainSun);
+  registerIconSvg('icon-mountain-sun', IconMountainSun);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'ni' icon
    */
-  class IconNi extends Icon {
+  class IconNi extends IconSvg {
       constructor() {
           super(ni16X16);
       }
   }
-  registerIcon('icon-ni', IconNi);
+  registerIconSvg('icon-ni', IconNi);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'notebook' icon
    */
-  class IconNotebook extends Icon {
+  class IconNotebook extends IconSvg {
       constructor() {
           super(notebook16X16);
       }
   }
-  registerIcon('icon-notebook', IconNotebook);
+  registerIconSvg('icon-notebook', IconNotebook);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'numberList' icon
    */
-  class IconNumberList extends Icon {
+  class IconNumberList extends IconSvg {
       constructor() {
           super(numberList16X16);
       }
   }
-  registerIcon('icon-number-list', IconNumberList);
+  registerIconSvg('icon-number-list', IconNumberList);
   const iconNumberListTag = 'nimble-icon-number-list';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24507,36 +24533,36 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'outdent' icon
    */
-  class IconOutdent extends Icon {
+  class IconOutdent extends IconSvg {
       constructor() {
           super(outdent16X16);
       }
   }
-  registerIcon('icon-outdent', IconOutdent);
+  registerIconSvg('icon-outdent', IconOutdent);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'outwardSquaresThree' icon
    */
-  class IconOutwardSquaresThree extends Icon {
+  class IconOutwardSquaresThree extends IconSvg {
       constructor() {
           super(outwardSquaresThree16X16);
       }
   }
-  registerIcon('icon-outward-squares-three', IconOutwardSquaresThree);
+  registerIconSvg('icon-outward-squares-three', IconOutwardSquaresThree);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'paperPlane' icon
    */
-  class IconPaperPlane extends Icon {
+  class IconPaperPlane extends IconSvg {
       constructor() {
           super(paperPlane16X16);
       }
   }
-  registerIcon('icon-paper-plane', IconPaperPlane);
+  registerIconSvg('icon-paper-plane', IconPaperPlane);
   const iconPaperPlaneTag = 'nimble-icon-paper-plane';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -24544,492 +24570,492 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'paperclip' icon
    */
-  class IconPaperclip extends Icon {
+  class IconPaperclip extends IconSvg {
       constructor() {
           super(paperclip16X16);
       }
   }
-  registerIcon('icon-paperclip', IconPaperclip);
+  registerIconSvg('icon-paperclip', IconPaperclip);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'paste' icon
    */
-  class IconPaste extends Icon {
+  class IconPaste extends IconSvg {
       constructor() {
           super(paste16X16);
       }
   }
-  registerIcon('icon-paste', IconPaste);
+  registerIconSvg('icon-paste', IconPaste);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'pause' icon
    */
-  class IconPause extends Icon {
+  class IconPause extends IconSvg {
       constructor() {
           super(pause16X16);
       }
   }
-  registerIcon('icon-pause', IconPause);
+  registerIconSvg('icon-pause', IconPause);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'pencil' icon
    */
-  class IconPencil extends Icon {
+  class IconPencil extends IconSvg {
       constructor() {
           super(pencil16X16);
       }
   }
-  registerIcon('icon-pencil', IconPencil);
+  registerIconSvg('icon-pencil', IconPencil);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'pencilToRectangle' icon
    */
-  class IconPencilToRectangle extends Icon {
+  class IconPencilToRectangle extends IconSvg {
       constructor() {
           super(pencilToRectangle);
       }
   }
-  registerIcon('icon-pencil-to-rectangle', IconPencilToRectangle);
+  registerIconSvg('icon-pencil-to-rectangle', IconPencilToRectangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'play' icon
    */
-  class IconPlay extends Icon {
+  class IconPlay extends IconSvg {
       constructor() {
           super(play);
       }
   }
-  registerIcon('icon-play', IconPlay);
+  registerIconSvg('icon-play', IconPlay);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'potWithLid' icon
    */
-  class IconPotWithLid extends Icon {
+  class IconPotWithLid extends IconSvg {
       constructor() {
           super(potWithLid16X16);
       }
   }
-  registerIcon('icon-pot-with-lid', IconPotWithLid);
+  registerIconSvg('icon-pot-with-lid', IconPotWithLid);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'print' icon
    */
-  class IconPrint extends Icon {
+  class IconPrint extends IconSvg {
       constructor() {
           super(print);
       }
   }
-  registerIcon('icon-print', IconPrint);
+  registerIconSvg('icon-print', IconPrint);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'qrcodeRead' icon
    */
-  class IconQrcodeRead extends Icon {
+  class IconQrcodeRead extends IconSvg {
       constructor() {
           super(qrcodeRead);
       }
   }
-  registerIcon('icon-qrcode-read', IconQrcodeRead);
+  registerIconSvg('icon-qrcode-read', IconQrcodeRead);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'question' icon
    */
-  class IconQuestion extends Icon {
+  class IconQuestion extends IconSvg {
       constructor() {
           super(question16X16);
       }
   }
-  registerIcon('icon-question', IconQuestion);
+  registerIconSvg('icon-question', IconQuestion);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'rectangleCheckLines' icon
    */
-  class IconRectangleCheckLines extends Icon {
+  class IconRectangleCheckLines extends IconSvg {
       constructor() {
           super(rectangleCheckLines16X16);
       }
   }
-  registerIcon('icon-rectangle-check-lines', IconRectangleCheckLines);
+  registerIconSvg('icon-rectangle-check-lines', IconRectangleCheckLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'rectangleLines' icon
    */
-  class IconRectangleLines extends Icon {
+  class IconRectangleLines extends IconSvg {
       constructor() {
           super(rectangleLines16X16);
       }
   }
-  registerIcon('icon-rectangle-lines', IconRectangleLines);
+  registerIconSvg('icon-rectangle-lines', IconRectangleLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'runningArrow' icon
    */
-  class IconRunningArrow extends Icon {
+  class IconRunningArrow extends IconSvg {
       constructor() {
           super(runningArrow16X16);
       }
   }
-  registerIcon('icon-running-arrow', IconRunningArrow);
+  registerIconSvg('icon-running-arrow', IconRunningArrow);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'scannerGun' icon
    */
-  class IconScannerGun extends Icon {
+  class IconScannerGun extends IconSvg {
       constructor() {
           super(scannerGun16X16);
       }
   }
-  registerIcon('icon-scanner-gun', IconScannerGun);
+  registerIconSvg('icon-scanner-gun', IconScannerGun);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'screenCheckLines' icon
    */
-  class IconScreenCheckLines extends Icon {
+  class IconScreenCheckLines extends IconSvg {
       constructor() {
           super(screenCheckLines16X16);
       }
   }
-  registerIcon('icon-screen-check-lines', IconScreenCheckLines);
+  registerIconSvg('icon-screen-check-lines', IconScreenCheckLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'screenCheckLinesCalendar' icon
    */
-  class IconScreenCheckLinesCalendar extends Icon {
+  class IconScreenCheckLinesCalendar extends IconSvg {
       constructor() {
           super(screenCheckLinesCalendar16X16);
       }
   }
-  registerIcon('icon-screen-check-lines-calendar', IconScreenCheckLinesCalendar);
+  registerIconSvg('icon-screen-check-lines-calendar', IconScreenCheckLinesCalendar);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'server' icon
    */
-  class IconServer extends Icon {
+  class IconServer extends IconSvg {
       constructor() {
           super(server16X16);
       }
   }
-  registerIcon('icon-server', IconServer);
+  registerIconSvg('icon-server', IconServer);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'shareNodes' icon
    */
-  class IconShareNodes extends Icon {
+  class IconShareNodes extends IconSvg {
       constructor() {
           super(shareNodes16X16);
       }
   }
-  registerIcon('icon-share-nodes', IconShareNodes);
+  registerIconSvg('icon-share-nodes', IconShareNodes);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'shieldCheck' icon
    */
-  class IconShieldCheck extends Icon {
+  class IconShieldCheck extends IconSvg {
       constructor() {
           super(shieldCheck16X16);
       }
   }
-  registerIcon('icon-shield-check', IconShieldCheck);
+  registerIconSvg('icon-shield-check', IconShieldCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'shieldXmark' icon
    */
-  class IconShieldXmark extends Icon {
+  class IconShieldXmark extends IconSvg {
       constructor() {
           super(shieldXmark16X16);
       }
   }
-  registerIcon('icon-shield-xmark', IconShieldXmark);
+  registerIconSvg('icon-shield-xmark', IconShieldXmark);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'signalBars' icon
    */
-  class IconSignalBars extends Icon {
+  class IconSignalBars extends IconSvg {
       constructor() {
           super(signalBars16X16);
       }
   }
-  registerIcon('icon-signal-bars', IconSignalBars);
+  registerIconSvg('icon-signal-bars', IconSignalBars);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'sineGraph' icon
    */
-  class IconSineGraph extends Icon {
+  class IconSineGraph extends IconSvg {
       constructor() {
           super(sineGraph16X16);
       }
   }
-  registerIcon('icon-sine-graph', IconSineGraph);
+  registerIconSvg('icon-sine-graph', IconSineGraph);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'skipArrow' icon
    */
-  class IconSkipArrow extends Icon {
+  class IconSkipArrow extends IconSvg {
       constructor() {
           super(skipArrow16X16);
       }
   }
-  registerIcon('icon-skip-arrow', IconSkipArrow);
+  registerIconSvg('icon-skip-arrow', IconSkipArrow);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'sparkleSwirls' icon
    */
-  class IconSparkleSwirls extends Icon {
+  class IconSparkleSwirls extends IconSvg {
       constructor() {
           super(sparkleSwirls16X16);
       }
   }
-  registerIcon('icon-sparkle-swirls', IconSparkleSwirls);
+  registerIconSvg('icon-sparkle-swirls', IconSparkleSwirls);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'sparkles' icon
    */
-  class IconSparkles extends Icon {
+  class IconSparkles extends IconSvg {
       constructor() {
           super(sparkles16X16);
       }
   }
-  registerIcon('icon-sparkles', IconSparkles);
+  registerIconSvg('icon-sparkles', IconSparkles);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'spinner' icon
    */
-  class IconSpinner extends Icon {
+  class IconSpinner extends IconSvg {
       constructor() {
           super(spinner);
       }
   }
-  registerIcon('icon-spinner', IconSpinner);
+  registerIconSvg('icon-spinner', IconSpinner);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'squareCheck' icon
    */
-  class IconSquareCheck extends Icon {
+  class IconSquareCheck extends IconSvg {
       constructor() {
           super(squareCheck16X16);
       }
   }
-  registerIcon('icon-square-check', IconSquareCheck);
+  registerIconSvg('icon-square-check', IconSquareCheck);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'squareListCog' icon
    */
-  class IconSquareListCog extends Icon {
+  class IconSquareListCog extends IconSvg {
       constructor() {
           super(squareListCog16X16);
       }
   }
-  registerIcon('icon-square-list-cog', IconSquareListCog);
+  registerIconSvg('icon-square-list-cog', IconSquareListCog);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'squareT' icon
    */
-  class IconSquareT extends Icon {
+  class IconSquareT extends IconSvg {
       constructor() {
           super(squareT16X16);
       }
   }
-  registerIcon('icon-square-t', IconSquareT);
+  registerIconSvg('icon-square-t', IconSquareT);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'squareX' icon
    */
-  class IconSquareX extends Icon {
+  class IconSquareX extends IconSvg {
       constructor() {
           super(squareX16X16);
       }
   }
-  registerIcon('icon-square-x', IconSquareX);
+  registerIconSvg('icon-square-x', IconSquareX);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'star8Point' icon
    */
-  class IconStar8Point extends Icon {
+  class IconStar8Point extends IconSvg {
       constructor() {
           super(star8Point16X16);
       }
   }
-  registerIcon('icon-star-8-point', IconStar8Point);
+  registerIconSvg('icon-star-8-point', IconStar8Point);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'stopSquare' icon
    */
-  class IconStopSquare extends Icon {
+  class IconStopSquare extends IconSvg {
       constructor() {
           super(stopSquare16X16);
       }
   }
-  registerIcon('icon-stop-square', IconStopSquare);
+  registerIconSvg('icon-stop-square', IconStopSquare);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'systemlink' icon
    */
-  class IconSystemlink extends Icon {
+  class IconSystemlink extends IconSvg {
       constructor() {
           super(systemlink16X16);
       }
   }
-  registerIcon('icon-systemlink', IconSystemlink);
+  registerIconSvg('icon-systemlink', IconSystemlink);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 't' icon
    */
-  class IconT extends Icon {
+  class IconT extends IconSvg {
       constructor() {
           super(t16X16);
       }
   }
-  registerIcon('icon-t', IconT);
+  registerIconSvg('icon-t', IconT);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'tablet' icon
    */
-  class IconTablet extends Icon {
+  class IconTablet extends IconSvg {
       constructor() {
           super(tablet16X16);
       }
   }
-  registerIcon('icon-tablet', IconTablet);
+  registerIconSvg('icon-tablet', IconTablet);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'tag' icon
    */
-  class IconTag extends Icon {
+  class IconTag extends IconSvg {
       constructor() {
           super(tag16X16);
       }
   }
-  registerIcon('icon-tag', IconTag);
+  registerIconSvg('icon-tag', IconTag);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'tags' icon
    */
-  class IconTags extends Icon {
+  class IconTags extends IconSvg {
       constructor() {
           super(tags16X16);
       }
   }
-  registerIcon('icon-tags', IconTags);
+  registerIconSvg('icon-tags', IconTags);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'targetCrosshairs' icon
    */
-  class IconTargetCrosshairs extends Icon {
+  class IconTargetCrosshairs extends IconSvg {
       constructor() {
           super(targetCrosshairs16X16);
       }
   }
-  registerIcon('icon-target-crosshairs', IconTargetCrosshairs);
+  registerIconSvg('icon-target-crosshairs', IconTargetCrosshairs);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'targetCrosshairsProgress' icon
    */
-  class IconTargetCrosshairsProgress extends Icon {
+  class IconTargetCrosshairsProgress extends IconSvg {
       constructor() {
           super(targetCrosshairsProgress16X16);
       }
   }
-  registerIcon('icon-target-crosshairs-progress', IconTargetCrosshairsProgress);
+  registerIconSvg('icon-target-crosshairs-progress', IconTargetCrosshairsProgress);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'threeCirclesAscendingContainer' icon
    */
-  class IconThreeCirclesAscendingContainer extends Icon {
+  class IconThreeCirclesAscendingContainer extends IconSvg {
       constructor() {
           super(threeCirclesAscendingContainer16X16);
       }
   }
-  registerIcon('icon-three-circles-ascending-container', IconThreeCirclesAscendingContainer);
+  registerIconSvg('icon-three-circles-ascending-container', IconThreeCirclesAscendingContainer);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'threeDotsLine' icon
    */
-  class IconThreeDotsLine extends Icon {
+  class IconThreeDotsLine extends IconSvg {
       constructor() {
           super(threeDotsLine16X16);
       }
   }
-  registerIcon('icon-three-dots-line', IconThreeDotsLine);
+  registerIconSvg('icon-three-dots-line', IconThreeDotsLine);
   const iconThreeDotsLineTag = 'nimble-icon-three-dots-line';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -25037,96 +25063,96 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'threeVerticalLines' icon
    */
-  class IconThreeVerticalLines extends Icon {
+  class IconThreeVerticalLines extends IconSvg {
       constructor() {
           super(threeVerticalLines16X16);
       }
   }
-  registerIcon('icon-three-vertical-lines', IconThreeVerticalLines);
+  registerIconSvg('icon-three-vertical-lines', IconThreeVerticalLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'thumbDown' icon
    */
-  class IconThumbDown extends Icon {
+  class IconThumbDown extends IconSvg {
       constructor() {
           super(thumbDown16X16);
       }
   }
-  registerIcon('icon-thumb-down', IconThumbDown);
+  registerIconSvg('icon-thumb-down', IconThumbDown);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'thumbUp' icon
    */
-  class IconThumbUp extends Icon {
+  class IconThumbUp extends IconSvg {
       constructor() {
           super(thumbUp16X16);
       }
   }
-  registerIcon('icon-thumb-up', IconThumbUp);
+  registerIconSvg('icon-thumb-up', IconThumbUp);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'thumbtack' icon
    */
-  class IconThumbtack extends Icon {
+  class IconThumbtack extends IconSvg {
       constructor() {
           super(thumbtack16X16);
       }
   }
-  registerIcon('icon-thumbtack', IconThumbtack);
+  registerIconSvg('icon-thumbtack', IconThumbtack);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'tileSize' icon
    */
-  class IconTileSize extends Icon {
+  class IconTileSize extends IconSvg {
       constructor() {
           super(tileSize16X16);
       }
   }
-  registerIcon('icon-tile-size', IconTileSize);
+  registerIconSvg('icon-tile-size', IconTileSize);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'trash' icon
    */
-  class IconTrash extends Icon {
+  class IconTrash extends IconSvg {
       constructor() {
           super(trash16X16);
       }
   }
-  registerIcon('icon-trash', IconTrash);
+  registerIconSvg('icon-trash', IconTrash);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'triangle' icon
    */
-  class IconTriangle extends Icon {
+  class IconTriangle extends IconSvg {
       constructor() {
           super(triangle16X16);
       }
   }
-  registerIcon('icon-triangle', IconTriangle);
+  registerIconSvg('icon-triangle', IconTriangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'triangleTwoLinesHorizontal' icon
    */
-  class IconTriangleTwoLinesHorizontal extends Icon {
+  class IconTriangleTwoLinesHorizontal extends IconSvg {
       constructor() {
           super(triangleTwoLinesHorizontal);
       }
   }
-  registerIcon('icon-triangle-two-lines-horizontal', IconTriangleTwoLinesHorizontal);
+  registerIconSvg('icon-triangle-two-lines-horizontal', IconTriangleTwoLinesHorizontal);
   const iconTriangleTwoLinesHorizontalTag = 'nimble-icon-triangle-two-lines-horizontal';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -25134,24 +25160,24 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'trueFalseRectangle' icon
    */
-  class IconTrueFalseRectangle extends Icon {
+  class IconTrueFalseRectangle extends IconSvg {
       constructor() {
           super(trueFalseRectangle16X16);
       }
   }
-  registerIcon('icon-true-false-rectangle', IconTrueFalseRectangle);
+  registerIconSvg('icon-true-false-rectangle', IconTrueFalseRectangle);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'twoSquaresInBrackets' icon
    */
-  class IconTwoSquaresInBrackets extends Icon {
+  class IconTwoSquaresInBrackets extends IconSvg {
       constructor() {
           super(twoSquaresInBrackets);
       }
   }
-  registerIcon('icon-two-squares-in-brackets', IconTwoSquaresInBrackets);
+  registerIconSvg('icon-two-squares-in-brackets', IconTwoSquaresInBrackets);
   const iconTwoSquaresInBracketsTag = 'nimble-icon-two-squares-in-brackets';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
@@ -25159,204 +25185,204 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * The icon component for the 'twoTrianglesBetweenLines' icon
    */
-  class IconTwoTrianglesBetweenLines extends Icon {
+  class IconTwoTrianglesBetweenLines extends IconSvg {
       constructor() {
           super(twoTrianglesBetweenLines);
       }
   }
-  registerIcon('icon-two-triangles-between-lines', IconTwoTrianglesBetweenLines);
+  registerIconSvg('icon-two-triangles-between-lines', IconTwoTrianglesBetweenLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'unlink' icon
    */
-  class IconUnlink extends Icon {
+  class IconUnlink extends IconSvg {
       constructor() {
           super(unlink16X16);
       }
   }
-  registerIcon('icon-unlink', IconUnlink);
+  registerIconSvg('icon-unlink', IconUnlink);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'unlock' icon
    */
-  class IconUnlock extends Icon {
+  class IconUnlock extends IconSvg {
       constructor() {
           super(unlock16X16);
       }
   }
-  registerIcon('icon-unlock', IconUnlock);
+  registerIconSvg('icon-unlock', IconUnlock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'upRightFromSquare' icon
    */
-  class IconUpRightFromSquare extends Icon {
+  class IconUpRightFromSquare extends IconSvg {
       constructor() {
           super(upRightFromSquare16X16);
       }
   }
-  registerIcon('icon-up-right-from-square', IconUpRightFromSquare);
+  registerIconSvg('icon-up-right-from-square', IconUpRightFromSquare);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'upload' icon
    */
-  class IconUpload extends Icon {
+  class IconUpload extends IconSvg {
       constructor() {
           super(upload16X16);
       }
   }
-  registerIcon('icon-upload', IconUpload);
+  registerIconSvg('icon-upload', IconUpload);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'user' icon
    */
-  class IconUser extends Icon {
+  class IconUser extends IconSvg {
       constructor() {
           super(user16X16);
       }
   }
-  registerIcon('icon-user', IconUser);
+  registerIconSvg('icon-user', IconUser);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'watch' icon
    */
-  class IconWatch extends Icon {
+  class IconWatch extends IconSvg {
       constructor() {
           super(watch16X16);
       }
   }
-  registerIcon('icon-watch', IconWatch);
+  registerIconSvg('icon-watch', IconWatch);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'waveform' icon
    */
-  class IconWaveform extends Icon {
+  class IconWaveform extends IconSvg {
       constructor() {
           super(waveform16X16);
       }
   }
-  registerIcon('icon-waveform', IconWaveform);
+  registerIconSvg('icon-waveform', IconWaveform);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'webviCustom' icon
    */
-  class IconWebviCustom extends Icon {
+  class IconWebviCustom extends IconSvg {
       constructor() {
           super(webviCustom16X16);
       }
   }
-  registerIcon('icon-webvi-custom', IconWebviCustom);
+  registerIconSvg('icon-webvi-custom', IconWebviCustom);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'webviHost' icon
    */
-  class IconWebviHost extends Icon {
+  class IconWebviHost extends IconSvg {
       constructor() {
           super(webviHost16X16);
       }
   }
-  registerIcon('icon-webvi-host', IconWebviHost);
+  registerIconSvg('icon-webvi-host', IconWebviHost);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'windowCode' icon
    */
-  class IconWindowCode extends Icon {
+  class IconWindowCode extends IconSvg {
       constructor() {
           super(windowCode16X16);
       }
   }
-  registerIcon('icon-window-code', IconWindowCode);
+  registerIconSvg('icon-window-code', IconWindowCode);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'windowDock' icon
    */
-  class IconWindowDock extends Icon {
+  class IconWindowDock extends IconSvg {
       constructor() {
           super(windowDock16X16);
       }
   }
-  registerIcon('icon-window-dock', IconWindowDock);
+  registerIconSvg('icon-window-dock', IconWindowDock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'windowRestore' icon
    */
-  class IconWindowRestore extends Icon {
+  class IconWindowRestore extends IconSvg {
       constructor() {
           super(windowRestore16X16);
       }
   }
-  registerIcon('icon-window-restore', IconWindowRestore);
+  registerIconSvg('icon-window-restore', IconWindowRestore);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'windowText' icon
    */
-  class IconWindowText extends Icon {
+  class IconWindowText extends IconSvg {
       constructor() {
           super(windowText16X16);
       }
   }
-  registerIcon('icon-window-text', IconWindowText);
+  registerIconSvg('icon-window-text', IconWindowText);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'wrenchHammer' icon
    */
-  class IconWrenchHammer extends Icon {
+  class IconWrenchHammer extends IconSvg {
       constructor() {
           super(wrenchHammer16X16);
       }
   }
-  registerIcon('icon-wrench-hammer', IconWrenchHammer);
+  registerIconSvg('icon-wrench-hammer', IconWrenchHammer);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'xmark' icon
    */
-  class IconXmark extends Icon {
+  class IconXmark extends IconSvg {
       constructor() {
           super(xmark16X16);
       }
   }
-  registerIcon('icon-xmark', IconXmark);
+  registerIconSvg('icon-xmark', IconXmark);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * The icon component for the 'xmarkCheck' icon
    */
-  class IconXmarkCheck extends Icon {
+  class IconXmarkCheck extends IconSvg {
       constructor() {
           super(xmarkCheck16X16);
       }
   }
-  registerIcon('icon-xmark-check', IconXmarkCheck);
+  registerIconSvg('icon-xmark-check', IconXmarkCheck);
 
   /**
    * Base class for label providers