@ni/nimble-components 35.0.1 → 35.0.3

package/dist/all-components-bundle.js

@@ -10117,15 +10117,12 @@
   /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
   /*!
-  * tabbable 6.3.0
+  * tabbable 6.4.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
   */
   // NOTE: separate `:not()` selectors has broader browser support than the newer
   //  `:not([inert], [inert] *)` (Feb 2023)
-  // CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
-  //  the entire query to fail, resulting in no nodes found, which will break a lot
-  //  of things... so we have to rely on JS to identify nodes inside an inert container
-  var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
+  var candidateSelectors = ['input:not([inert]):not([inert] *)', 'select:not([inert]):not([inert] *)', 'textarea:not([inert]):not([inert] *)', 'a[href]:not([inert]):not([inert] *)', 'button:not([inert]):not([inert] *)', '[tabindex]:not(slot):not([inert]):not([inert] *)', 'audio[controls]:not([inert]):not([inert] *)', 'video[controls]:not([inert]):not([inert] *)', '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', 'details>summary:first-of-type:not([inert]):not([inert] *)', 'details:not([inert]):not([inert] *)'];
   var NoElement = typeof Element === 'undefined';
   var matches$1 = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
   var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
@@ -10134,35 +10131,6 @@
   } : function (element) {
     return element === null || element === void 0 ? void 0 : element.ownerDocument;
   };
-
-  /**
-   * Determines if a node is inert or in an inert ancestor.
-   * @param {Element} [node]
-   * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
-   *  see if any of them are inert. If false, only `node` itself is considered.
-   * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
-   *  False if `node` is falsy.
-   */
-  var _isInert = function isInert(node, lookUp) {
-    var _node$getAttribute;
-    if (lookUp === void 0) {
-      lookUp = true;
-    }
-    // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
-    //  JS API property; we have to check the attribute, which can either be empty or 'true';
-    //  if it's `null` (not specified) or 'false', it's an active element
-    var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
-    var inert = inertAtt === '' || inertAtt === 'true';
-
-    // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
-    //  if it weren't for `matches()` not being a function on shadow roots; the following
-    //  code works for any kind of node
-    // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
-    //  so it likely would not support `:is([inert] *)` either...
-    var result = inert || lookUp && node && _isInert(node.parentNode); // recursive
-
-    return result;
-  };
   var isInput = function isInput(node) {
     return node.tagName === 'INPUT';
   };
@@ -10379,18 +10347,14 @@
     return false;
   };
   var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-    if (node.disabled ||
-    // we must do an inert look up to filter out any elements inside an inert ancestor
-    //  because we're limited in the type of selectors we can use in JSDom (see related
-    //  note related to `candidateSelectors`)
-    _isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+    if (node.disabled || isHiddenInput(node) || isHidden(node, options) ||
     // For a details element with a summary, the summary element gets the focus
     isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
       return false;
     }
     return true;
   };
-  var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+  var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe:not([inert]):not([inert] *)').join(',');
   var isFocusable = function isFocusable(node, options) {
     options = options || {};
     if (!node) {
@@ -18839,18 +18803,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$I,
@@ -18864,12 +18838,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
@@ -18877,12 +18851,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 = {
@@ -19747,12 +19721,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
@@ -19760,12 +19734,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
@@ -19773,12 +19747,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
@@ -19786,12 +19760,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';
 
   /**
@@ -20866,12 +20840,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 = {
@@ -21294,12 +21268,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';
 
   /**
@@ -22686,12 +22660,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
@@ -22699,12 +22673,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
@@ -22712,216 +22686,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
@@ -22929,228 +22903,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
@@ -23158,1092 +23132,1092 @@ 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 '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
@@ -24251,96 +24225,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
@@ -24348,48 +24322,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
@@ -24397,84 +24371,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
@@ -24482,60 +24456,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
@@ -24543,528 +24517,528 @@ 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);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
    * 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
@@ -25072,96 +25046,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
@@ -25169,24 +25143,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
@@ -25194,204 +25168,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
@@ -36581,15 +36555,15 @@ so this becomes the fallback color for the slot */ ''}
           let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
           iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
               if (widget.spec.marks)
-                  updater.syncToMarks(widget.spec.marks, inline, view);
+                  updater.syncToMarks(widget.spec.marks, inline, view, i);
               else if (widget.type.side >= 0 && !insideNode)
-                  updater.syncToMarks(i == this.node.childCount ? Mark$1.none : this.node.child(i).marks, inline, view);
+                  updater.syncToMarks(i == this.node.childCount ? Mark$1.none : this.node.child(i).marks, inline, view, i);
               // If the next node is a desc matching this widget, reuse it,
               // otherwise insert the widget as a new view desc.
               updater.placeWidget(widget, view, off);
           }, (child, outerDeco, innerDeco, i) => {
               // Make sure the wrapping mark descs match the node's marks.
-              updater.syncToMarks(child.marks, inline, view);
+              updater.syncToMarks(child.marks, inline, view, i);
               // Try several strategies for drawing this node
               let compIndex;
               if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) ;
@@ -36605,7 +36579,7 @@ so this becomes the fallback color for the slot */ ''}
               off += child.nodeSize;
           });
           // Drop all remaining descs after the current position.
-          updater.syncToMarks([], inline, view);
+          updater.syncToMarks([], inline, view, 0);
           if (this.node.isTextblock)
               updater.addTextblockHacks();
           updater.destroyRest();
@@ -36995,7 +36969,7 @@ so this becomes the fallback color for the slot */ ''}
       }
       // Sync the current stack of mark descs with the given array of
       // marks, reusing existing mark descs when possible.
-      syncToMarks(marks, inline, view) {
+      syncToMarks(marks, inline, view, parentIndex) {
           let keep = 0, depth = this.stack.length >> 1;
           let maxKeep = Math.min(depth, marks.length);
           while (keep < maxKeep &&
@@ -37011,8 +36985,10 @@ so this becomes the fallback color for the slot */ ''}
           }
           while (depth < marks.length) {
               this.stack.push(this.top, this.index + 1);
-              let found = -1;
-              for (let i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
+              let found = -1, scanTo = this.top.children.length;
+              if (parentIndex < this.preMatch.index)
+                  scanTo = Math.min(this.index + 3, scanTo);
+              for (let i = this.index; i < scanTo; i++) {
                   let next = this.top.children[i];
                   if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) {
                       found = i;
@@ -37208,9 +37184,7 @@ so this becomes the fallback color for the slot */ ''}
   }
   // Iterate from the end of the fragment and array of descs to find
   // directly matching ones, in order to avoid overeagerly reusing those
-  // for other nodes. Returns the fragment index of the first node that
-  // is part of the sequence of matched nodes at the end of the
-  // fragment.
+  // for other nodes.
   function preMatch(frag, parentDesc) {
       let curDesc = parentDesc, descI = curDesc.children.length;
       let fI = frag.childCount, matched = new Map, matches = [];
@@ -37233,7 +37207,6 @@ so this becomes the fallback color for the slot */ ''}
                   break outer;
               }
               else {
-                  // FIXME
                   descI = curDesc.parent.children.indexOf(curDesc);
                   curDesc = curDesc.parent;
               }
@@ -38280,6 +38253,7 @@ so this becomes the fallback color for the slot */ ''}
           this.compositionNodes = [];
           this.compositionEndedAt = -2e8;
           this.compositionID = 1;
+          this.badSafariComposition = false;
           // Set to a composition ID when there are pending changes at compositionend
           this.compositionPendingChanges = 0;
           this.domChangeCount = 0;
@@ -38726,7 +38700,9 @@ so this becomes the fallback color for the slot */ ''}
           view.input.compositionEndedAt = event.timeStamp;
           view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
           view.input.compositionNode = null;
-          if (view.input.compositionPendingChanges)
+          if (view.input.badSafariComposition)
+              view.domObserver.forceFlush();
+          else if (view.input.compositionPendingChanges)
               Promise.resolve().then(() => view.domObserver.flush());
           view.input.compositionID++;
           scheduleComposeEnd(view, 20);
@@ -39789,15 +39765,24 @@ so this becomes the fallback color for the slot */ ''}
               new window.MutationObserver(mutations => {
                   for (let i = 0; i < mutations.length; i++)
                       this.queue.push(mutations[i]);
-                  // IE11 will sometimes (on backspacing out a single character
-                  // text node after a BR node) call the observer callback
-                  // before actually updating the DOM, which will cause
-                  // ProseMirror to miss the change (see #930)
                   if (ie$1 && ie_version <= 11 && mutations.some(m => m.type == "childList" && m.removedNodes.length ||
-                      m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length))
+                      m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length)) {
+                      // IE11 will sometimes (on backspacing out a single character
+                      // text node after a BR node) call the observer callback
+                      // before actually updating the DOM, which will cause
+                      // ProseMirror to miss the change (see #930)
                       this.flushSoon();
-                  else
+                  }
+                  else if (safari && view.composing && mutations.some(m => m.type == "childList" && m.target.nodeName == "TR")) {
+                      // Safari does weird stuff when finishing a composition in a
+                      // table cell, which tends to involve inserting inappropriate
+                      // nodes in the table row.
+                      view.input.badSafariComposition = true;
+                      this.flushSoon();
+                  }
+                  else {
                       this.flush();
+                  }
               });
           if (useCharData) {
               this.onCharData = e => {
@@ -39964,6 +39949,10 @@ so this becomes the fallback color for the slot */ ''}
                   view.docView.markDirty(from, to);
                   checkCSS(view);
               }
+              if (view.input.badSafariComposition) {
+                  view.input.badSafariComposition = false;
+                  fixUpBadSafariComposition(view, added);
+              }
               this.handleDOMChange(from, to, typeOver, added);
               if (view.docView && view.docView.dirty)
                   view.updateState(view.state);
@@ -40087,6 +40076,37 @@ so this becomes the fallback color for the slot */ ''}
       }
       return null;
   }
+  // Kludge for a Safari bug where, on ending a composition in an
+  // otherwise empty table cell, it randomly moves the composed text
+  // into the table row around that cell, greatly confusing everything
+  // (#188).
+  function fixUpBadSafariComposition(view, addedNodes) {
+      var _a;
+      let { focusNode, focusOffset } = view.domSelectionRange();
+      for (let node of addedNodes) {
+          if (((_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeName) == "TR") {
+              let nextCell = node.nextSibling;
+              while (nextCell && (nextCell.nodeName != "TD" && nextCell.nodeName != "TH"))
+                  nextCell = nextCell.nextSibling;
+              if (nextCell) {
+                  let parent = nextCell;
+                  for (;;) {
+                      let first = parent.firstChild;
+                      if (!first || first.nodeType != 1 || first.contentEditable == "false" ||
+                          /^(BR|IMG)$/.test(first.nodeName))
+                          break;
+                      parent = first;
+                  }
+                  parent.insertBefore(node, parent.firstChild);
+                  if (focusNode == node)
+                      view.domSelection().collapse(node, focusOffset);
+              }
+              else {
+                  node.parentNode.removeChild(node);
+              }
+          }
+      }
+  }
 
   // Note that all referencing and parsing is done with the
   // start-of-operation selection and document, since that's the one
@@ -40650,7 +40670,7 @@ so this becomes the fallback color for the slot */ ''}
                       this.docView.destroy();
                       this.docView = docViewDesc(state.doc, outerDeco, innerDeco, this.dom, this);
                   }
-                  if (chromeKludge && !this.trackWrites)
+                  if (chromeKludge && (!this.trackWrites || !this.dom.contains(this.trackWrites)))
                       forceSelUpdate = true;
               }
               // Work around for an issue where an update arriving right between
@@ -41777,6 +41797,11 @@ so this becomes the fallback color for the slot */ ''}
     navigator.userAgent.includes("Mac") && "ontouchend" in document;
   }
 
+  // src/utilities/isSafari.ts
+  function isSafari() {
+    return typeof navigator !== "undefined" ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent) : false;
+  }
+
   // src/commands/focus.ts
   var focus = (position = null, options = {}) => ({ editor, view, tr, dispatch }) => {
     options = {
@@ -41787,6 +41812,9 @@ so this becomes the fallback color for the slot */ ''}
       if (isiOS() || isAndroid()) {
         view.dom.focus();
       }
+      if (isSafari() && !isiOS() && !isAndroid()) {
+        view.dom.focus({ preventScroll: true });
+      }
       requestAnimationFrame(() => {
         if (!editor.isDestroyed) {
           view.focus();
@@ -44598,6 +44626,35 @@ so this becomes the fallback color for the slot */ ''}
         })
       );
     }
+    /**
+     * Get the composed dispatchTransaction function from all extensions.
+     * @param baseDispatch The base dispatch function (e.g. from the editor or user props)
+     * @returns A composed dispatch function
+     */
+    dispatchTransaction(baseDispatch) {
+      const { editor } = this;
+      const extensions = sortExtensions([...this.extensions].reverse());
+      return extensions.reduceRight((next, extension) => {
+        const context = {
+          name: extension.name,
+          options: extension.options,
+          storage: this.editor.extensionStorage[extension.name],
+          editor,
+          type: getSchemaTypeByName(extension.name, this.schema)
+        };
+        const dispatchTransaction = getExtensionField(
+          extension,
+          "dispatchTransaction",
+          context
+        );
+        if (!dispatchTransaction) {
+          return next;
+        }
+        return (transaction) => {
+          dispatchTransaction.call(context, { transaction, next });
+        };
+      }, baseDispatch);
+    }
     get markViews() {
       const { editor } = this;
       const { markExtensions } = splitExtensions(this.extensions);
@@ -45432,7 +45489,8 @@ img.ProseMirror-separator {
         },
         onPaste: () => null,
         onDrop: () => null,
-        onDelete: () => null
+        onDelete: () => null,
+        enableExtensionDispatchTransaction: true
       };
       this.isCapturingTransaction = false;
       this.capturedTransaction = null;
@@ -45756,15 +45814,17 @@ img.ProseMirror-separator {
      * Creates a ProseMirror view.
      */
     createView(element) {
-      var _a;
+      const { editorProps, enableExtensionDispatchTransaction } = this.options;
+      const baseDispatch = editorProps.dispatchTransaction || this.dispatchTransaction.bind(this);
+      const dispatch = enableExtensionDispatchTransaction ? this.extensionManager.dispatchTransaction(baseDispatch) : baseDispatch;
       this.editorView = new EditorView(element, {
-        ...this.options.editorProps,
+        ...editorProps,
         attributes: {
           // add `role="textbox"` to the editor element
           role: "textbox",
-          ...(_a = this.options.editorProps) == null ? void 0 : _a.attributes
+          ...editorProps == null ? void 0 : editorProps.attributes
         },
-        dispatchTransaction: this.dispatchTransaction.bind(this),
+        dispatchTransaction: dispatch,
         state: this.editorState,
         markViews: this.extensionManager.markViews,
         nodeViews: this.extensionManager.nodeViews
@@ -59406,7 +59466,7 @@ ${renderedContent}
           const link = find$1(textContent, { defaultProtocol: options.defaultProtocol }).find(
             (item) => item.isLink && item.value === textContent
           );
-          if (!textContent || !link || shouldAutoLink !== void 0 && !shouldAutoLink(link.href)) {
+          if (!textContent || !link || shouldAutoLink !== void 0 && !shouldAutoLink(link.value)) {
             return false;
           }
           return options.editor.commands.setMark(options.type, {
@@ -59473,7 +59533,22 @@ ${renderedContent}
         },
         isAllowedUri: (url, ctx) => !!isAllowedUri(url, ctx.protocols),
         validate: (url) => !!url,
-        shouldAutoLink: (url) => !!url
+        shouldAutoLink: (url) => {
+          const hasProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(url);
+          const hasMaybeProtocol = /^[a-z][a-z0-9+.-]*:/i.test(url);
+          if (hasProtocol || hasMaybeProtocol && !url.includes("@")) {
+            return true;
+          }
+          const urlWithoutUserinfo = url.includes("@") ? url.split("@").pop() : url;
+          const hostname = urlWithoutUserinfo.split(/[/?#:]/)[0];
+          if (/^\d{1,3}(\.\d{1,3}){3}$/.test(hostname)) {
+            return false;
+          }
+          if (!/\./.test(hostname)) {
+            return false;
+          }
+          return true;
+        }
       };
     },
     addAttributes() {
@@ -60486,6 +60561,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         Object.entries(HTMLAttributes).forEach(([key, value]) => {
           listItem.setAttribute(key, value);
         });
+        let prevRenderedAttributeKeys = new Set(Object.keys(HTMLAttributes));
         return {
           dom: listItem,
           contentDOM: content,
@@ -60496,6 +60572,31 @@ ${nextLine.slice(indentLevel + 2)}`;
             listItem.dataset.checked = updatedNode.attrs.checked;
             checkbox.checked = updatedNode.attrs.checked;
             updateA11Y(updatedNode);
+            const extensionAttributes = editor.extensionManager.attributes;
+            const newHTMLAttributes = getRenderedAttributes(updatedNode, extensionAttributes);
+            const newKeys = new Set(Object.keys(newHTMLAttributes));
+            const staticAttrs = this.options.HTMLAttributes;
+            prevRenderedAttributeKeys.forEach((key) => {
+              if (!newKeys.has(key)) {
+                if (key in staticAttrs) {
+                  listItem.setAttribute(key, staticAttrs[key]);
+                } else {
+                  listItem.removeAttribute(key);
+                }
+              }
+            });
+            Object.entries(newHTMLAttributes).forEach(([key, value]) => {
+              if (value === null || value === void 0) {
+                if (key in staticAttrs) {
+                  listItem.setAttribute(key, staticAttrs[key]);
+                } else {
+                  listItem.removeAttribute(key);
+                }
+              } else {
+                listItem.setAttribute(key, value);
+              }
+            });
+            prevRenderedAttributeKeys = newKeys;
             return true;
           }
         };
@@ -60729,7 +60830,8 @@ ${nextLine.slice(indentLevel + 2)}`;
     items = () => [],
     render = () => ({}),
     allow = () => true,
-    findSuggestionMatch: findSuggestionMatch2 = findSuggestionMatch
+    findSuggestionMatch: findSuggestionMatch2 = findSuggestionMatch,
+    shouldShow
   }) {
     let props;
     const renderer = render == null ? void 0 : render();
@@ -60895,7 +60997,13 @@ ${nextLine.slice(indentLevel + 2)}`;
               state,
               range: match.range,
               isActive: prev.active
-            })) {
+            }) && (!shouldShow || shouldShow({
+              editor,
+              range: match.range,
+              query: match.query,
+              text: match.text,
+              transaction
+            }))) {
               next.active = true;
               next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
               next.range = match.range;
@@ -70971,7 +71079,6 @@ focus outline in that case.
     };
     const handler = createHandler(true);
     const endHandler = createHandler(false);
-    endHandler();
     element.addEventListener("scroll", handler, addEventListenerOptions);
     const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
     if (registerScrollendEvent) {
@@ -71013,6 +71120,7 @@ focus outline in that case.
       this.scrollElement = null;
       this.targetWindow = null;
       this.isScrolling = false;
+      this.currentScrollToIndex = null;
       this.measurementsCache = [];
       this.itemSizeCache = /* @__PURE__ */ new Map();
       this.laneAssignments = /* @__PURE__ */ new Map();
@@ -71148,10 +71256,6 @@ focus outline in that case.
           this.elementsCache.forEach((cached) => {
             this.observer.observe(cached);
           });
-          this._scrollToOffset(this.getScrollOffset(), {
-            adjustments: void 0,
-            behavior: void 0
-          });
           this.unsubs.push(
             this.options.observeElementRect(this, (rect) => {
               this.scrollRect = rect;
@@ -71167,6 +71271,10 @@ focus outline in that case.
               this.maybeNotify();
             })
           );
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: void 0,
+            behavior: void 0
+          });
         }
       };
       this.getSize = () => {
@@ -71238,11 +71346,7 @@ focus outline in that case.
           };
         },
         {
-          key: false,
-          skipInitialOnChange: true,
-          onChange: () => {
-            this.notify(this.isScrolling);
-          }
+          key: false
         }
       );
       this.getMeasurements = memo(
@@ -71269,7 +71373,7 @@ focus outline in that case.
             this.laneAssignments.clear();
             this.pendingMeasuredCacheIndexes = [];
           }
-          if (this.measurementsCache.length === 0) {
+          if (this.measurementsCache.length === 0 && !this.lanesSettling) {
             this.measurementsCache = this.options.initialMeasurementsCache;
             this.measurementsCache.forEach((item) => {
               this.itemSizeCache.set(item.key, item.size);
@@ -71474,7 +71578,17 @@ focus outline in that case.
           )]
         );
       };
+      this.getMaxScrollOffset = () => {
+        if (!this.scrollElement) return 0;
+        if ("scrollHeight" in this.scrollElement) {
+          return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
+        } else {
+          const doc = this.scrollElement.document.documentElement;
+          return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
+        }
+      };
       this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+        if (!this.scrollElement) return 0;
         const size = this.getSize();
         const scrollOffset = this.getScrollOffset();
         if (align === "auto") {
@@ -71485,7 +71599,7 @@ focus outline in that case.
         } else if (align === "end") {
           toOffset -= size;
         }
-        const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
+        const maxOffset = this.getMaxScrollOffset();
         return Math.max(Math.min(maxOffset, toOffset), 0);
       };
       this.getOffsetForIndex = (index, align = "auto") => {
@@ -71505,6 +71619,9 @@ focus outline in that case.
             return [scrollOffset, align];
           }
         }
+        if (align === "end" && index === this.options.count - 1) {
+          return [this.getMaxScrollOffset(), align];
+        }
         const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
         return [
           this.getOffsetForAlignment(toOffset, align, item.size),
@@ -71530,6 +71647,7 @@ focus outline in that case.
           );
         }
         index = Math.max(0, Math.min(index, this.options.count - 1));
+        this.currentScrollToIndex = index;
         let attempts = 0;
         const maxAttempts = 10;
         const tryScroll = (currentAlign) => {
@@ -71542,19 +71660,28 @@ focus outline in that case.
           const [offset, align] = offsetInfo;
           this._scrollToOffset(offset, { adjustments: void 0, behavior });
           this.targetWindow.requestAnimationFrame(() => {
-            const currentOffset = this.getScrollOffset();
-            const afterInfo = this.getOffsetForIndex(index, align);
-            if (!afterInfo) {
-              console.warn("Failed to get offset for index:", index);
-              return;
-            }
-            if (!approxEqual(afterInfo[0], currentOffset)) {
-              scheduleRetry(align);
+            const verify = () => {
+              if (this.currentScrollToIndex !== index) return;
+              const currentOffset = this.getScrollOffset();
+              const afterInfo = this.getOffsetForIndex(index, align);
+              if (!afterInfo) {
+                console.warn("Failed to get offset for index:", index);
+                return;
+              }
+              if (!approxEqual(afterInfo[0], currentOffset)) {
+                scheduleRetry(align);
+              }
+            };
+            if (this.isDynamicMode()) {
+              this.targetWindow.requestAnimationFrame(verify);
+            } else {
+              verify();
             }
           });
         };
         const scheduleRetry = (align) => {
           if (!this.targetWindow) return;
+          if (this.currentScrollToIndex !== index) return;
           attempts++;
           if (attempts < maxAttempts) {
             if (this.options.debug) {
@@ -77137,7 +77264,7 @@ focus outline in that case.
           });
       }
       resolveOptions(options) {
-          if (!options || options.numberTextFormat === NumberTextFormat.default) {
+          if (options?.numberTextFormat === NumberTextFormat.default) {
               return {
                   numberTextFormat: NumberTextFormat.default,
                   decimalDigits: undefined,
@@ -94030,8 +94157,8 @@ focus outline in that case.
   // significant digits p, where x is positive and p is in [1, 21] or undefined.
   // For example, formatDecimalParts(1.23) returns ["123", 0].
   function formatDecimalParts(x, p) {
-    if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
-    var i, coefficient = x.slice(0, i);
+    if (!isFinite(x) || x === 0) return null; // NaN, ±Infinity, ±0
+    var i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e"), coefficient = x.slice(0, i);
 
     // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
     // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
@@ -94136,7 +94263,7 @@ focus outline in that case.
 
   function formatPrefixAuto(x, p) {
     var d = formatDecimalParts(x, p);
-    if (!d) return x + "";
+    if (!d) return prefixExponent = undefined, x.toPrecision(p);
     var coefficient = d[0],
         exponent = d[1],
         i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
@@ -94190,7 +94317,7 @@ focus outline in that case.
         minus = locale.minus === undefined ? "−" : locale.minus + "",
         nan = locale.nan === undefined ? "NaN" : locale.nan + "";
 
-    function newFormat(specifier) {
+    function newFormat(specifier, options) {
       specifier = formatSpecifier(specifier);
 
       var fill = specifier.fill,
@@ -94215,8 +94342,8 @@ focus outline in that case.
 
       // Compute the prefix and suffix.
       // For SI-prefix, the suffix is lazily computed.
-      var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
-          suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
+      var prefix = (options && options.prefix !== undefined ? options.prefix : "") + (symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : ""),
+          suffix = (symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "") + (options && options.suffix !== undefined ? options.suffix : "");
 
       // What format function should we use?
       // Is this an integer type?
@@ -94257,7 +94384,7 @@ focus outline in that case.
 
           // Compute the prefix and suffix.
           valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
-          valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
+          valueSuffix = (type === "s" && !isNaN(value) && prefixExponent !== undefined ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
 
           // Break the formatted value into the integer “value” part that can be
           // grouped, and fractional or exponential “suffix” part that is not.
@@ -94302,12 +94429,11 @@ focus outline in that case.
     }
 
     function formatPrefix(specifier, value) {
-      var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
-          e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
+      var e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
           k = Math.pow(10, -e),
-          prefix = prefixes[8 + e / 3];
+          f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier), {suffix: prefixes[8 + e / 3]});
       return function(value) {
-        return f(k * value) + prefix;
+        return f(k * value);
       };
     }