@shival99/z-ui 2.2.5 → 2.3.0

package/fesm2022/shival99-z-ui-components-z-icon.mjs

@@ -1,6 +1,5 @@
-import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { isDevMode, input, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, makeEnvironmentProviders, inject } from '@angular/core';
+import { isDevMode, input, signal, computed, viewChild, ViewContainerRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, makeEnvironmentProviders, inject } from '@angular/core';
 import { NgIconComponent, provideNgIconLoader, withCaching } from '@ng-icons/core';
 import { zMergeClasses } from '@shival99/z-ui/utils';
 import * as animatedIcons from 'ng-animated-icons';
@@ -109,6 +108,7 @@ class ZIconComponent {
     ...(ngDevMode ? [{ debugName: "_svgFetchError" }] : /* istanbul ignore next */ []));
     zClasses = computed(() => zMergeClasses(zIconVariants({ zSize: this.zSize() }), this.class(), this.zStrokeWidth() === 0 ? 'stroke-none' : '', 'inline-flex shrink-0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zClasses" }] : /* istanbul ignore next */ []));
+    animatedIconHost = viewChild('animatedIconHost', { ...(ngDevMode ? { debugName: "animatedIconHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     animatedIcon = computed(() => {
         const animatedType = this.zAnimatedType();
         if (!animatedType) {
@@ -117,13 +117,19 @@ class ZIconComponent {
         return getZAnimatedIconComponent(animatedType);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "animatedIcon" }] : /* istanbul ignore next */ []));
-    animatedIconInputs = computed(() => ({
+    _animatedIconInputs = computed(() => ({
         animate: this.shouldAnimate(),
         color: 'currentColor',
         size: Number(this.normalizedSize()),
         strokeWidth: this.zStrokeWidth(),
     }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "animatedIconInputs" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "_animatedIconInputs" }] : /* istanbul ignore next */ []));
+    _animatedIconRef = null;
+    _animatedIconType = null;
+    _animatedIconListenerCleanup = null;
+    _animatedIconRestartTimeoutId = null;
+    _isPersistentAnimate = computed(() => this.zAnimationTrigger() === 'always' || this.zAnimate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isPersistentAnimate" }] : /* istanbul ignore next */ []));
     shouldAnimate = computed(() => {
         const trigger = this.zAnimationTrigger();
         if (trigger === 'always' || this.zAnimate()) {
@@ -142,6 +148,33 @@ class ZIconComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldAnimate" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            const host = this.animatedIconHost();
+            const type = this.animatedIcon();
+            if (!host) {
+                this._destroyAnimatedIconRef();
+                return;
+            }
+            if (type !== this._animatedIconType) {
+                this._destroyAnimatedIconRef();
+                this._animatedIconType = type;
+                host.clear();
+                if (type) {
+                    this._animatedIconRef = host.createComponent(type);
+                    this._attachAnimatedIconLoopListener(this._animatedIconRef);
+                }
+            }
+            const ref = this._animatedIconRef;
+            if (ref) {
+                const inputs = this._animatedIconInputs();
+                for (const [key, value] of Object.entries(inputs)) {
+                    ref.setInput(key, value);
+                }
+                // Signal inputs set imperatively via setInput() don't reliably schedule
+                // change detection for a dynamically created OnPush child, so force it.
+                ref.changeDetectorRef.detectChanges();
+            }
+        });
         effect(onCleanup => {
             const svgInput = this.zSvg().trim();
             if (!svgInput) {
@@ -202,6 +235,45 @@ class ZIconComponent {
             });
         });
     }
+    _destroyAnimatedIconRef() {
+        this._cancelAnimatedIconRestart();
+        this._animatedIconListenerCleanup?.();
+        this._animatedIconListenerCleanup = null;
+        this._animatedIconRef?.destroy();
+        this._animatedIconRef = null;
+        this._animatedIconType = null;
+    }
+    _attachAnimatedIconLoopListener(ref) {
+        const nativeElement = ref.location.nativeElement;
+        const handler = () => this._restartAnimatedIconLoop(ref);
+        nativeElement.addEventListener('animationend', handler);
+        this._animatedIconListenerCleanup = () => nativeElement.removeEventListener('animationend', handler);
+    }
+    _restartAnimatedIconLoop(ref) {
+        if (this._animatedIconRef !== ref || !this._isPersistentAnimate()) {
+            return;
+        }
+        this._cancelAnimatedIconRestart();
+        ref.setInput('animate', false);
+        ref.changeDetectorRef.detectChanges();
+        this._animatedIconRestartTimeoutId = setTimeout(() => {
+            this._animatedIconRestartTimeoutId = null;
+            if (this._animatedIconRef !== ref || !this._isPersistentAnimate()) {
+                return;
+            }
+            ref.setInput('animate', true);
+            ref.changeDetectorRef.detectChanges();
+        }, 50);
+    }
+    _cancelAnimatedIconRestart() {
+        if (this._animatedIconRestartTimeoutId !== null) {
+            clearTimeout(this._animatedIconRestartTimeoutId);
+            this._animatedIconRestartTimeoutId = null;
+        }
+    }
+    ngOnDestroy() {
+        this._destroyAnimatedIconRef();
+    }
     _isRawSvg(value) {
         return value.startsWith('<svg');
     }
@@ -261,11 +333,11 @@ class ZIconComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZIconComponent, isStandalone: true, selector: "z-icon, [z-icon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedType: { classPropertyName: "zAnimatedType", publicName: "zAnimatedType", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTrigger: { classPropertyName: "zAnimationTrigger", publicName: "zAnimationTrigger", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidth: { classPropertyName: "zStrokeWidth", publicName: "zStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, zSvg: { classPropertyName: "zSvg", publicName: "zSvg", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "setHoverActive(true)", "mouseleave": "setHoverActive(false)", "focusin": "setFocusActive(true)", "focusout": "setFocusActive(false)", "touchstart": "setTouchActive(true)", "touchend": "setTouchActive(false)" }, properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, ngImport: i0, template: "@if (animatedIcon()) {\n  <ng-container [ngComponentOutlet]=\"animatedIcon()\" [ngComponentOutletInputs]=\"animatedIconInputs()\" />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZIconComponent, isStandalone: true, selector: "z-icon, [z-icon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedType: { classPropertyName: "zAnimatedType", publicName: "zAnimatedType", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTrigger: { classPropertyName: "zAnimationTrigger", publicName: "zAnimationTrigger", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidth: { classPropertyName: "zStrokeWidth", publicName: "zStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, zSvg: { classPropertyName: "zSvg", publicName: "zSvg", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "setHoverActive(true)", "mouseleave": "setHoverActive(false)", "focusin": "setFocusActive(true)", "focusout": "setFocusActive(false)", "touchstart": "setTouchActive(true)", "touchend": "setTouchActive(false)" }, properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, viewQueries: [{ propertyName: "animatedIconHost", first: true, predicate: ["animatedIconHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (animatedIcon()) {\n  <ng-container #animatedIconHost />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n", dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-icon, [z-icon]', imports: [NgIconComponent, NgComponentOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'z-icon, [z-icon]', imports: [NgIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'zClasses()',
                         '[style.width]': 'normalizedSize() + "px"',
                         '[style.height]': 'normalizedSize() + "px"',
@@ -275,9 +347,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '(focusout)': 'setFocusActive(false)',
                         '(touchstart)': 'setTouchActive(true)',
                         '(touchend)': 'setTouchActive(false)',
-                    }, template: "@if (animatedIcon()) {\n  <ng-container [ngComponentOutlet]=\"animatedIcon()\" [ngComponentOutletInputs]=\"animatedIconInputs()\" />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zAnimatedType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimatedType", required: false }] }], zAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimate", required: false }] }], zAnimationTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimationTrigger", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStrokeWidth", required: false }] }], zSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSvg", required: false }] }] } });
+                    }, template: "@if (animatedIcon()) {\n  <ng-container #animatedIconHost />\n} @else if (resolvedSvg()) {\n  <ng-icon [svg]=\"resolvedSvg()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else if (!zSvg()) {\n  <ng-icon [name]=\"zType()\" [size]=\"normalizedSize()\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zAnimatedType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimatedType", required: false }] }], zAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimate", required: false }] }], zAnimationTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimationTrigger", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStrokeWidth", required: false }] }], zSvg: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSvg", required: false }] }], animatedIconHost: [{ type: i0.ViewChild, args: ['animatedIconHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
+/**
+ * Optional bundled icon overrides used before the CDN loader fallback.
+ *
+ * The default registry is intentionally empty so icon families remain lazy.
+ */
 const Z_ICONS = {};
 
 /**
@@ -298,6 +375,14 @@ function normalizeLucideSvg(svg) {
     const cssVar = 'style="stroke-width: var(--ng-icon__stroke-width, 2)"';
     return svg.replace(/stroke-width="[^"]*"/gi, cssVar);
 }
+/**
+ * Normalizes line-based SVG families to the shared ng-icon stroke variable.
+ * This keeps `zStrokeWidth` consistent across the different icon sources.
+ */
+function normalizeStrokeSvg(svg) {
+    const cssVar = 'style="stroke-width: var(--ng-icon__stroke-width, 2)"';
+    return svg.replace(/stroke-width="[^"]*"/gi, cssVar);
+}
 /**
  * Phosphor SVGs already ship with fill="currentColor" and no stroke-width,
  * so no normalization is required. Kept as an explicit passthrough for parity
@@ -382,6 +467,10 @@ async function getFallbackIcon(name) {
         // console.warn(`[ZIcon] Using bundled fallback for "${name}"`);
         return icon;
     }
+    const familyIcon = await getFallbackIconFromFamily(name);
+    if (familyIcon) {
+        return familyIcon;
+    }
     const lucideIcons = await import('@ng-icons/lucide');
     const matchedIcon = Reflect.get(lucideIcons, name);
     if (typeof matchedIcon === 'string') {
@@ -389,6 +478,54 @@ async function getFallbackIcon(name) {
     }
     return lucideIcons.lucideCircleHelp;
 }
+/**
+ * Resolves an icon from the local ng-icons package for CDN failure fallback.
+ * Dynamic imports keep the complete family out of the normal application path.
+ */
+async function getFallbackIconFromFamily(name) {
+    if (name.startsWith('tabler')) {
+        const icons = name.endsWith('Fill')
+            ? await import('@ng-icons/tabler-icons/fill')
+            : await import('@ng-icons/tabler-icons');
+        const icon = Reflect.get(icons, name);
+        return typeof icon === 'string' ? icon : null;
+    }
+    if (name.startsWith('hero')) {
+        const icons = name.endsWith('Micro')
+            ? await import('@ng-icons/heroicons/micro')
+            : name.endsWith('Mini')
+                ? await import('@ng-icons/heroicons/mini')
+                : name.endsWith('Solid')
+                    ? await import('@ng-icons/heroicons/solid')
+                    : await import('@ng-icons/heroicons/outline');
+        const icon = Reflect.get(icons, name);
+        return typeof icon === 'string' ? icon : null;
+    }
+    if (name.startsWith('iconoir')) {
+        const icons = name.endsWith('Solid')
+            ? await import('@ng-icons/iconoir/solid')
+            : await import('@ng-icons/iconoir/regular');
+        const icon = Reflect.get(icons, name);
+        return typeof icon === 'string' ? icon : null;
+    }
+    if (name.startsWith('phosphor')) {
+        const { weight } = convertPhosphorIconName(name);
+        const icons = weight === 'bold'
+            ? await import('@ng-icons/phosphor-icons/bold')
+            : weight === 'fill'
+                ? await import('@ng-icons/phosphor-icons/fill')
+                : weight === 'light'
+                    ? await import('@ng-icons/phosphor-icons/light')
+                    : weight === 'thin'
+                        ? await import('@ng-icons/phosphor-icons/thin')
+                        : weight === 'duotone'
+                            ? await import('@ng-icons/phosphor-icons/duotone')
+                            : await import('@ng-icons/phosphor-icons/regular');
+        const icon = Reflect.get(icons, name);
+        return typeof icon === 'string' ? icon : null;
+    }
+    return null;
+}
 /**
  * Converts ng-icons icon name to Lucide CDN format.
  * Examples:
@@ -461,6 +598,67 @@ function convertPhosphorIconName(name) {
     const iconName = weight === 'regular' ? kebab : `${kebab}-${weight}`;
     return { weight, iconName };
 }
+/**
+ * Converts a Tabler icon name to its CDN folder and kebab-case asset name.
+ * Tabler's filled package uses a `Fill` suffix in its ng-icons exports.
+ */
+function convertTablerIconName(name) {
+    const isFilled = name.endsWith('Fill');
+    const iconPart = (isFilled ? name.slice(0, -'Fill'.length) : name).replace(/^tabler/, '');
+    const iconName = iconPart
+        .replace(/([A-Z])/g, '-$1')
+        .replace(/(\d+)/g, '-$1')
+        .replace(/(\d)([a-z])/g, '$1-$2')
+        .toLowerCase()
+        .replace(/^-/, '')
+        .replace(/--+/g, '-');
+    return { style: isFilled ? 'filled' : 'outline', iconName };
+}
+/**
+ * Converts a Heroicons export name to its official size/style asset path.
+ * Mini and micro exports are solid-only 20px and 16px variants respectively.
+ */
+function convertHeroIconName(name) {
+    let iconPart = name.replace(/^hero/, '');
+    let size = '24';
+    let style = 'outline';
+    if (iconPart.endsWith('Micro')) {
+        size = '16';
+        style = 'solid';
+        iconPart = iconPart.slice(0, -'Micro'.length);
+    }
+    else if (iconPart.endsWith('Mini')) {
+        size = '20';
+        style = 'solid';
+        iconPart = iconPart.slice(0, -'Mini'.length);
+    }
+    else if (iconPart.endsWith('Solid')) {
+        style = 'solid';
+        iconPart = iconPart.slice(0, -'Solid'.length);
+    }
+    const iconName = iconPart
+        .replace(/([A-Z])/g, '-$1')
+        .replace(/(\d+)/g, '-$1')
+        .replace(/(\d)([a-z])/g, '$1-$2')
+        .toLowerCase()
+        .replace(/^-/, '')
+        .replace(/--+/g, '-');
+    return { size, style, iconName };
+}
+/**
+ * Converts an Iconoir export name to its style folder and kebab-case asset.
+ */
+function convertIconoirIconName(name) {
+    const isSolid = name.endsWith('Solid');
+    const iconPart = (isSolid ? name.slice(0, -'Solid'.length) : name).replace(/^iconoir/, '');
+    const iconName = iconPart
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase()
+        .replace(/^-/, '')
+        .replace(/--+/g, '-');
+    return { style: isSolid ? 'solid' : 'regular', iconName };
+}
 /**
  * Converts ng-icons-style Huge icon name to the @hugeicons/core-free-icons
  * CDN module name. We expose icons with a `huge` prefix over the original
@@ -508,6 +706,9 @@ function convertBrandIconName(name) {
 const LUCIDE_CDN_URL = 'https://cdn.jsdelivr.net/npm/lucide-static@latest/icons';
 const SAX_CDN_URL = 'https://cdn.jsdelivr.net/gh/placetopay-org/iconsax-vue@main/src/Base';
 const PHOSPHOR_CDN_URL = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@latest/assets';
+const TABLER_CDN_URL = 'https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons';
+const HEROICONS_CDN_URL = 'https://cdn.jsdelivr.net/npm/heroicons@latest';
+const ICONOIR_CDN_URL = 'https://cdn.jsdelivr.net/npm/iconoir@latest/icons';
 const HUGE_CDN_URL = 'https://cdn.jsdelivr.net/npm/@hugeicons/core-free-icons@4.2.1/dist/esm';
 const BRAND_CDN_URL = 'https://thesvg.org/icons';
 const ICON_CDN_TIMEOUT_MS = 4000;
@@ -520,9 +721,9 @@ function retryIconRequest(error, retryCount) {
     return timer(ICON_CDN_RETRY_DELAY_MS * retryCount);
 }
 /**
- * Provides hybrid icon loading from CDN with fallback to bundled icons:
- * - Primary: Load icons from CDN (Lucide & Iconsax)
- * - Fallback: Use bundled icons from Z_ICONS if CDN fails
+ * Provides hybrid icon loading from CDN with fallback to local icon packages.
+ * The default path keeps full icon families lazy, while a CDN failure loads
+ * only the requested family's package as a fallback.
  *
  * @example
  * ```typescript
@@ -593,6 +794,21 @@ function provideZIconLoader() {
                 const url = `${PHOSPHOR_CDN_URL}/${weight}/${iconName}.svg`;
                 return loadWithCache(name, url, http, normalizePhosphorSvg);
             }
+            if (name.startsWith('tabler')) {
+                const { style, iconName } = convertTablerIconName(name);
+                const url = `${TABLER_CDN_URL}/${style}/${iconName}.svg`;
+                return loadWithCache(name, url, http, normalizeStrokeSvg);
+            }
+            if (name.startsWith('hero')) {
+                const { size, style, iconName } = convertHeroIconName(name);
+                const url = `${HEROICONS_CDN_URL}/${size}/${style}/${iconName}.svg`;
+                return loadWithCache(name, url, http, normalizeStrokeSvg);
+            }
+            if (name.startsWith('iconoir')) {
+                const { style, iconName } = convertIconoirIconName(name);
+                const url = `${ICONOIR_CDN_URL}/${style}/${iconName}.svg`;
+                return loadWithCache(name, url, http, normalizeStrokeSvg);
+            }
             if (name.startsWith('huge')) {
                 const moduleName = convertHugeIconName(name);
                 const url = `${HUGE_CDN_URL}/${moduleName}.js`;