@shival99/z-ui 1.8.13 → 1.9.1

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

@@ -1,60 +1,28 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, isDevMode, makeEnvironmentProviders, inject } from '@angular/core';
+import { isDevMode, input, signal, computed, 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 { ZIndexDbService } from '@shival99/z-ui/services';
 import { cva } from 'class-variance-authority';
-import { saxRefreshBold, saxCloudChangeBold, saxPauseBold } from '@ng-icons/iconsax/bold';
-import { saxEditOutline } from '@ng-icons/iconsax/outline';
-import { lucideTestTube, lucidePackage2, lucideUndo, lucideRedo, lucideBanknote, lucideRotateCcw, lucideRefreshCw, lucideHistory, lucideMessageSquare, lucideCalendarDays, lucideHelpCircle, lucideFolder, lucideCircle, lucideUserSquare, lucideEllipsisVertical, lucideSquarePlay, lucidePlay, lucideAudioLines, lucideMic, lucideMessageSquareText, lucideWandSparkles, lucideSparkle, lucideDumbbell, lucideCpu, lucideBrainCog, lucideBrainCircuit, lucideBrain, lucideBotOff, lucideBotMessageSquare, lucidePlug2, lucidePlug, lucideRecycle, lucideIdCard, lucideContact, lucideClipboardCopy, lucideBadge, lucideZoomOut, lucideZoomIn, lucideWand2, lucideTicket, lucideTags, lucideTag, lucideShoppingBag, lucidePackageCheck, lucideClipboardPen, lucideReceipt, lucidePercent, lucideType, lucideBuilding, lucideBan, lucideFunnelX, lucideFilter, lucideAlertTriangle, lucideGitBranch, lucideMoreVertical, lucideSearchX, lucidePin, lucideGripVertical, lucideTable2, lucideFileArchive, lucideFileJson, lucideFileCode, lucideMusic, lucideFile, lucideDownload, lucideUploadCloud, lucideUpload, lucideToggleLeft, lucideCircleDot, lucideSquareCheck, lucideSparkles, lucideFolders, lucideUserSearch, lucidePieChart, lucideTextCursor, lucideListFilter, lucideNavigation, lucideFileEdit, lucideSliders, lucideCheckCircle, lucideFolderTree, lucideGrid3x3, lucideUsers2, lucideBarChart3, lucideRocket, lucideSquare, lucidePenTool, lucideMegaphone, lucideHash, lucideList, lucideImage, lucideGripHorizontal, lucideCircleHelp, lucideFileOutput, lucideLayoutTemplate, lucideSquarePen, lucideFolderOpen, lucideHome, lucideBarChart, lucideCloud, lucideLifeBuoy, lucideGithub, lucideLoader2, lucidePanelRightOpen, lucideComponent, lucideMessageCircleQuestion, lucideCircleAlert, lucideMessageCircle, lucideAlertOctagon, lucideLoader, lucideMoon, lucideSun, lucideListChevronsUpDown, lucideListChevronsDownUp, lucideFileCheck, lucideDatabaseBackup, lucideLink, lucideXCircle, lucideAlertCircle, lucideCheckCircle2, lucideBell, lucideChartColumnIncreasing, lucideBrushCleaning, lucideFastForward, lucideListChecks, lucideRefreshCwOff, lucideFileClock, lucideBookUp2, lucideFilePlus2, lucideFilePlus, lucideListPlus, lucideScanLine, lucideQrCode, lucideScanQrCode, lucideCode, lucideBarcode, lucideHardDriveDownload, lucideMailPlus, lucideCloudCheck, lucideWifiZero, lucideFileSymlink, lucideLockKeyholeOpen, lucideBadgeX, lucideCircleCheckBig, lucideShieldCheck, lucideBadgeCheck, lucideCheckLine, lucideCircleX, lucideArrowDownUp, lucideFilePenLine, lucideUserRoundPen, lucideCopy, lucidePaperclip, lucidePause, lucideSend, lucideBot, lucideTableOfContents, lucideFileUp, lucideNotepadText, lucideCalendarCheck, lucideCalendar1, lucideCalendarRange, lucideChartLine, lucideChartPie, lucideChartBar, lucideHouse, lucideCircleCheck, lucideUserLock, lucideArrowUp, lucideArrowDown, lucideLockKeyhole, lucideRefreshCcw, lucideWifi, lucideTruck, lucideTerminal, lucideTablet, lucideSmartphone, lucideServerCrash, lucideServer, lucideRadio, lucidePrinter, lucidePhoneCall, lucidePalette, lucideNetwork, lucideMailCheck, lucideLightbulb, lucideKey, lucideHeadphones, lucideLanguages, lucideGlobe, lucideFileSpreadsheet, lucideCreditCard, lucideCar, lucideBuilding2, lucideWrench, lucideWallet, lucideVideo, lucideUserPlus, lucideTrendingDown, lucideTimer, lucideStethoscope, lucideStar, lucideShield, lucidePhone, lucideMonitor, lucideMapPin, lucideHospital, lucideHeart, lucideGraduationCap, lucideFileText, lucideDollarSign, lucideDatabase, lucideClipboardList, lucideCalculator, lucideCalendar, lucideBookOpen, lucideClock, lucideInbox, lucidePackageOpen, lucideBellMinus, lucideCog, lucideBox, lucideMinus, lucideBadgeInfo, lucideCrown, lucideFiles, lucideX, lucideAlignJustify, lucideFunnel, lucideFileDown, lucideTrash2, lucideSlidersHorizontal, lucideBellRing, lucideChevronsRight, lucideChevronsLeft, lucideLoaderCircle, lucideWarehouse, lucideWorkflow, lucideTarget, lucideBriefcase, lucideLayers, lucideInfo, lucideMousePointer, lucideZap, lucideActivity, lucideUserCheck, lucideShoppingCart, lucidePackage, lucideTrendingUp, lucideChevronUp, lucideLogs, lucideUsersRound, lucideChartColumn, lucideLayoutDashboard, lucidePanelLeftOpen, lucidePanelLeftClose, lucideEllipsis, lucideEyeOff, lucideEye, lucideUsers, lucideSearch, lucidePlus, lucideChevronDown, lucideChevronRight, lucideChevronLeft, lucideSettings2, lucideCalendarFold, lucidePill, lucideSettings, lucideUser, lucideLogOut, lucideLock, lucideMenu, lucideArrowRight, lucideArrowLeft, lucideLayoutGrid, lucideMail, lucidePencil, lucideCheck, lucideMessageSquareWarning, lucideTriangleAlert, lucideCheckCheck, lucideMessageSquareDot, lucideFlagTriangleRight, lucideFlag, lucideSaveAll, lucideSave, lucideClipboardPlus, lucideAlarmClock, lucideBookCheck, lucideChartBarStacked, lucideStore, lucideLayers2 } from '@ng-icons/lucide';
 import { HttpClient } from '@angular/common/http';
-import { ZIndexDbService } from '@shival99/z-ui/services';
 import { from, switchMap, of, map, tap, catchError } from 'rxjs';
 
+const Z_ICON_CACHE_DB_NAME = 'ZIconCache';
+const Z_ICON_CACHE_STORE = 'zIcons';
+const zIconCacheDb = new ZIndexDbService({
+    dbName: Z_ICON_CACHE_DB_NAME,
+    version: 1,
+    stores: [{ name: Z_ICON_CACHE_STORE, encrypt: !isDevMode() }],
+    defaultStore: Z_ICON_CACHE_STORE,
+});
+
+const zIconSizeVariants = Object.fromEntries(Array.from({ length: 100 - 10 + 1 }, (_, index) => {
+    const size = String(10 + index);
+    return [size, `size-${size}`];
+}));
 const zIconVariants = cva('', {
     variants: {
-        zSize: {
-            '10': 'size-10',
-            '11': 'size-11',
-            '12': 'size-12',
-            '13': 'size-13',
-            '14': 'size-14',
-            '15': 'size-15',
-            '16': 'size-16',
-            '17': 'size-17',
-            '18': 'size-18',
-            '19': 'size-19',
-            '20': 'size-20',
-            '21': 'size-21',
-            '22': 'size-22',
-            '23': 'size-23',
-            '24': 'size-24',
-            '25': 'size-25',
-            '26': 'size-26',
-            '27': 'size-27',
-            '28': 'size-28',
-            '29': 'size-29',
-            '30': 'size-30',
-            '31': 'size-31',
-            '32': 'size-32',
-            '33': 'size-33',
-            '34': 'size-34',
-            '35': 'size-35',
-            '36': 'size-36',
-            '37': 'size-37',
-            '38': 'size-38',
-            '39': 'size-39',
-            '40': 'size-40',
-            '41': 'size-41',
-            '42': 'size-42',
-            '43': 'size-43',
-            '44': 'size-44',
-            '45': 'size-45',
-            '46': 'size-46',
-            '47': 'size-47',
-            '48': 'size-48',
-            '49': 'size-49',
-            '50': 'size-50',
-        },
+        zSize: zIconSizeVariants,
     },
     defaultVariants: {
         zSize: '16',
@@ -67,325 +35,140 @@ class ZIconComponent {
     zSize = input('16', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
     zStrokeWidth = input(2, ...(ngDevMode ? [{ debugName: "zStrokeWidth" }] : []));
     zSvg = input('', ...(ngDevMode ? [{ debugName: "zSvg" }] : []));
+    resolvedSvg = signal('', ...(ngDevMode ? [{ debugName: "resolvedSvg" }] : []));
+    normalizedSize = computed(() => {
+        const size = this.zSize();
+        if (size === null || size === undefined || size === '') {
+            return '16';
+        }
+        return String(size);
+    }, ...(ngDevMode ? [{ debugName: "normalizedSize" }] : []));
+    _svgFetchError = signal('', ...(ngDevMode ? [{ debugName: "_svgFetchError" }] : []));
     zClasses = computed(() => zMergeClasses(zIconVariants({ zSize: this.zSize() }), this.class(), this.zStrokeWidth() === 0 ? 'stroke-none' : '', 'inline-flex shrink-0'), ...(ngDevMode ? [{ debugName: "zClasses" }] : []));
+    constructor() {
+        effect(onCleanup => {
+            const svgInput = this.zSvg().trim();
+            if (!svgInput) {
+                this.resolvedSvg.set('');
+                this._svgFetchError.set('');
+                return;
+            }
+            if (this._isRawSvg(svgInput)) {
+                this.resolvedSvg.set(this._normalizeCustomSvg(svgInput));
+                this._svgFetchError.set('');
+                return;
+            }
+            if (!this._isSvgPath(svgInput)) {
+                this.resolvedSvg.set('');
+                this._svgFetchError.set('Unsupported SVG input format.');
+                return;
+            }
+            const controller = new AbortController();
+            onCleanup(() => controller.abort());
+            const cacheKey = `zsvg:path:${svgInput}`;
+            void zIconCacheDb
+                .get(cacheKey, { storeName: Z_ICON_CACHE_STORE })
+                .then(cachedSvg => {
+                if (controller.signal.aborted) {
+                    return null;
+                }
+                if (cachedSvg && this._isRawSvg(cachedSvg.trim())) {
+                    this.resolvedSvg.set(this._normalizeCustomSvg(cachedSvg));
+                    this._svgFetchError.set('');
+                    return null;
+                }
+                return fetch(svgInput, { signal: controller.signal }).then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch SVG from "${svgInput}"`);
+                    }
+                    return response.text();
+                });
+            })
+                .then(svgContent => {
+                if (controller.signal.aborted || !svgContent) {
+                    return;
+                }
+                if (!this._isRawSvg(svgContent.trim())) {
+                    throw new Error(`Invalid SVG content loaded from "${svgInput}"`);
+                }
+                const normalizedSvg = this._normalizeCustomSvg(svgContent);
+                this.resolvedSvg.set(normalizedSvg);
+                this._svgFetchError.set('');
+                void zIconCacheDb.set(cacheKey, normalizedSvg, { storeName: Z_ICON_CACHE_STORE }).catch(console.error);
+            })
+                .catch(error => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                console.error('[z-icon] Failed to load zSvg path:', error);
+                this.resolvedSvg.set('');
+                this._svgFetchError.set('Unable to load SVG path.');
+            });
+        });
+    }
+    _isRawSvg(value) {
+        return value.startsWith('<svg');
+    }
+    _isSvgPath(value) {
+        return value.endsWith('.svg') || value.includes('/');
+    }
+    _normalizeCustomSvg(svg) {
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(svg, 'image/svg+xml');
+            const svgEl = doc.documentElement;
+            if (svgEl.tagName.toLowerCase() !== 'svg') {
+                return svg;
+            }
+            const width = svgEl.getAttribute('width');
+            const height = svgEl.getAttribute('height');
+            if (!svgEl.getAttribute('viewBox') &&
+                width &&
+                height &&
+                !Number.isNaN(Number(width)) &&
+                !Number.isNaN(Number(height))) {
+                svgEl.setAttribute('viewBox', `0 0 ${width} ${height}`);
+            }
+            svgEl.removeAttribute('width');
+            svgEl.removeAttribute('height');
+            const allNodes = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];
+            allNodes.forEach(node => {
+                const fill = node.getAttribute('fill');
+                if (fill && fill !== 'none' && fill !== 'currentColor') {
+                    node.setAttribute('fill', 'currentColor');
+                }
+                const stroke = node.getAttribute('stroke');
+                if (stroke && stroke !== 'none' && stroke !== 'currentColor') {
+                    node.setAttribute('stroke', 'currentColor');
+                }
+                if (node.hasAttribute('stroke-width')) {
+                    node.removeAttribute('stroke-width');
+                    const currentStyle = node.getAttribute('style') ?? '';
+                    const normalizedStyle = currentStyle.trim();
+                    const strokeWidthStyle = 'stroke-width: var(--ng-icon__stroke-width, 2)';
+                    node.setAttribute('style', normalizedStyle ? `${normalizedStyle}; ${strokeWidthStyle}` : strokeWidthStyle);
+                }
+            });
+            return svgEl.outerHTML;
+        }
+        catch {
+            return svg;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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: { properties: { "class": "zClasses()", "style.width": "zSize() + \"px\"", "style.height": "zSize() + \"px\"" } }, ngImport: i0, template: "@if (zSvg()) {\n  <ng-icon [svg]=\"zSvg()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else {\n  <ng-icon [name]=\"zType()\" [size]=\"zSize() || '16'\" [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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: { properties: { "class": "zClasses()", "style.width": "normalizedSize() + \"px\"", "style.height": "normalizedSize() + \"px\"" } }, ngImport: i0, template: "@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: "21.0.6", ngImport: i0, type: ZIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-icon, [z-icon]', imports: [NgIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'zClasses()',
-                        '[style.width]': 'zSize() + "px"',
-                        '[style.height]': 'zSize() + "px"',
-                    }, template: "@if (zSvg()) {\n  <ng-icon [svg]=\"zSvg()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n} @else {\n  <ng-icon [name]=\"zType()\" [size]=\"zSize() || '16'\" [strokeWidth]=\"zStrokeWidth()\" />\n}\n" }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", 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 }] }] } });
+                        '[style.width]': 'normalizedSize() + "px"',
+                        '[style.height]': 'normalizedSize() + "px"',
+                    }, template: "@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 }] }], 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 }] }] } });
 
-const Z_ICONS = {
-    lucideLayers2,
-    lucideStore,
-    lucideChartBarStacked,
-    lucideBookCheck,
-    lucideAlarmClock,
-    lucideClipboardPlus,
-    lucideSave,
-    lucideSaveAll,
-    lucideFlag,
-    lucideFlagTriangleRight,
-    lucideMessageSquareDot,
-    lucideCheckCheck,
-    lucideTriangleAlert,
-    lucideMessageSquareWarning,
-    lucideCheck,
-    lucidePencil,
-    lucideMail,
-    lucideLayoutGrid,
-    lucideArrowLeft,
-    lucideArrowRight,
-    lucideMenu,
-    lucideLock,
-    lucideLogOut,
-    lucideUser,
-    lucideSettings,
-    lucidePill,
-    lucideCalendarFold,
-    lucideSettings2,
-    lucideChevronLeft,
-    lucideChevronRight,
-    lucideChevronDown,
-    lucidePlus,
-    lucideSearch,
-    lucideUsers,
-    lucideEye,
-    lucideEyeOff,
-    lucideEllipsis,
-    lucidePanelLeftClose,
-    lucidePanelLeftOpen,
-    lucideLayoutDashboard,
-    lucideChartColumn,
-    lucideUsersRound,
-    lucideLogs,
-    lucideChevronUp,
-    lucideTrendingUp,
-    lucidePackage,
-    lucideShoppingCart,
-    lucideUserCheck,
-    lucideActivity,
-    lucideZap,
-    lucideMousePointer,
-    lucideInfo,
-    lucideLayers,
-    lucideBriefcase,
-    lucideTarget,
-    lucideWorkflow,
-    lucideWarehouse,
-    lucideLoaderCircle,
-    lucideChevronsLeft,
-    lucideChevronsRight,
-    lucideBellRing,
-    lucideSlidersHorizontal,
-    lucideTrash2,
-    lucideFileDown,
-    lucideFunnel,
-    lucideAlignJustify,
-    lucideX,
-    lucideFiles,
-    lucideCrown,
-    lucideBadgeInfo,
-    lucideMinus,
-    lucideBox,
-    lucideCog,
-    lucideBellMinus,
-    lucidePackageOpen,
-    lucideInbox,
-    lucideClock,
-    lucideBookOpen,
-    lucideCalendar,
-    lucideCalculator,
-    lucideClipboardList,
-    lucideDatabase,
-    lucideDollarSign,
-    lucideFileText,
-    lucideGraduationCap,
-    lucideHeart,
-    lucideHospital,
-    lucideMapPin,
-    lucideMonitor,
-    lucidePhone,
-    lucideShield,
-    lucideStar,
-    lucideStethoscope,
-    lucideTimer,
-    lucideTrendingDown,
-    lucideUserPlus,
-    lucideVideo,
-    lucideWallet,
-    lucideWrench,
-    lucideBuilding2,
-    lucideCar,
-    lucideCreditCard,
-    lucideFileSpreadsheet,
-    lucideGlobe,
-    lucideLanguages,
-    lucideHeadphones,
-    lucideKey,
-    lucideLightbulb,
-    lucideMailCheck,
-    lucideNetwork,
-    lucidePalette,
-    lucidePhoneCall,
-    lucidePrinter,
-    lucideRadio,
-    lucideServer,
-    lucideServerCrash,
-    lucideSmartphone,
-    lucideTablet,
-    lucideTerminal,
-    lucideTruck,
-    lucideWifi,
-    lucideRefreshCcw,
-    lucideLockKeyhole,
-    lucideArrowDown,
-    lucideArrowUp,
-    lucideUserLock,
-    lucideCircleCheck,
-    lucideHouse,
-    lucideChartBar,
-    lucideChartPie,
-    lucideChartLine,
-    lucideCalendarRange,
-    lucideCalendar1,
-    lucideCalendarCheck,
-    lucideNotepadText,
-    lucideFileUp,
-    lucideTableOfContents,
-    lucideBot,
-    lucideSend,
-    lucidePause,
-    lucidePaperclip,
-    saxPauseBold,
-    lucideCopy,
-    lucideUserRoundPen,
-    lucideFilePenLine,
-    lucideArrowDownUp,
-    lucideCircleX,
-    lucideCheckLine,
-    lucideBadgeCheck,
-    lucideShieldCheck,
-    lucideCircleCheckBig,
-    lucideBadgeX,
-    lucideLockKeyholeOpen,
-    lucideFileSymlink,
-    lucideWifiZero,
-    lucideCloudCheck,
-    lucideMailPlus,
-    lucideHardDriveDownload,
-    saxCloudChangeBold,
-    saxRefreshBold,
-    lucideBarcode,
-    lucideCode,
-    lucideScanQrCode,
-    lucideQrCode,
-    lucideScanLine,
-    lucideListPlus,
-    lucideFilePlus,
-    lucideFilePlus2,
-    lucideBookUp2,
-    lucideFileClock,
-    lucideRefreshCwOff,
-    lucideListChecks,
-    lucideFastForward,
-    lucideBrushCleaning,
-    lucideChartColumnIncreasing,
-    lucideBell,
-    lucideCheckCircle2,
-    lucideAlertCircle,
-    lucideXCircle,
-    lucideLink,
-    lucideDatabaseBackup,
-    lucideFileCheck,
-    lucideListChevronsDownUp,
-    lucideListChevronsUpDown,
-    lucideSun,
-    lucideMoon,
-    lucideLoader,
-    lucideAlertOctagon,
-    lucideMessageCircle,
-    lucideCircleAlert,
-    lucideMessageCircleQuestion,
-    lucideComponent,
-    lucidePanelRightOpen,
-    lucideLoader2,
-    lucideGithub,
-    lucideLifeBuoy,
-    lucideCloud,
-    lucideBarChart,
-    lucideHome,
-    lucideFolderOpen,
-    lucideSquarePen,
-    lucideLayoutTemplate,
-    lucideFileOutput,
-    lucideCircleHelp,
-    lucideGripHorizontal,
-    lucideImage,
-    lucideList,
-    lucideHash,
-    lucideMegaphone,
-    lucidePenTool,
-    lucideSquare,
-    lucideRocket,
-    lucideBarChart3,
-    lucideUsers2,
-    lucideGrid3x3,
-    lucideFolderTree,
-    lucideCheckCircle,
-    lucideSliders,
-    lucideFileEdit,
-    lucideNavigation,
-    lucideListFilter,
-    lucideTextCursor,
-    lucidePieChart,
-    lucideUserSearch,
-    lucideFolders,
-    lucideSparkles,
-    lucideSquareCheck,
-    lucideCircleDot,
-    lucideToggleLeft,
-    lucideUpload,
-    lucideUploadCloud,
-    lucideDownload,
-    lucideFile,
-    lucideMusic,
-    lucideFileCode,
-    lucideFileJson,
-    lucideFileArchive,
-    lucideTable2,
-    lucideGripVertical,
-    lucidePin,
-    lucideSearchX,
-    lucideMoreVertical,
-    lucideGitBranch,
-    lucideAlertTriangle,
-    lucideFilter,
-    lucideFunnelX,
-    lucideBan,
-    lucideBuilding,
-    lucideType,
-    lucidePercent,
-    lucideReceipt,
-    lucideClipboardPen,
-    lucidePackageCheck,
-    lucideShoppingBag,
-    lucideTag,
-    lucideTags,
-    lucideTicket,
-    lucideWand2,
-    lucideZoomIn,
-    lucideZoomOut,
-    lucideBadge,
-    lucideClipboardCopy,
-    lucideContact,
-    lucideIdCard,
-    lucideRecycle,
-    lucidePlug,
-    lucidePlug2,
-    lucideBotMessageSquare,
-    lucideBotOff,
-    lucideBrain,
-    lucideBrainCircuit,
-    lucideBrainCog,
-    lucideCpu,
-    lucideDumbbell,
-    lucideSparkle,
-    lucideWandSparkles,
-    lucideMessageSquareText,
-    lucideMic,
-    lucideAudioLines,
-    lucidePlay,
-    lucideSquarePlay,
-    lucideEllipsisVertical,
-    saxEditOutline,
-    lucideUserSquare,
-    lucideCircle,
-    lucideFolder,
-    lucideHelpCircle,
-    lucideCalendarDays,
-    lucideMessageSquare,
-    lucideHistory,
-    lucideRefreshCw,
-    lucideRotateCcw,
-    lucideBanknote,
-    lucideRedo,
-    lucideUndo,
-    lucidePackage2,
-    lucideTestTube,
-};
+const Z_ICONS = {};
 
-const iconCacheDb = new ZIndexDbService({
-    dbName: 'ZIconCache',
-    version: 1,
-    stores: [{ name: 'zIcons', encrypt: !isDevMode() }],
-    defaultStore: 'zIcons',
-});
 /**
  * Normalizes Sax SVG to use currentColor and CSS variable for stroke-width.
  * This allows the icon to inherit color and strokeWidth from ng-icon props.
@@ -474,12 +257,12 @@ const SAX_CDN_URL = 'https://cdn.jsdelivr.net/gh/placetopay-org/iconsax-vue@main
  * ```
  */
 function loadWithCache(name, url, http, normalizer) {
-    return from(iconCacheDb.get(name)).pipe(switchMap(cached => {
+    return from(zIconCacheDb.get(name, { storeName: Z_ICON_CACHE_STORE })).pipe(switchMap(cached => {
         if (cached) {
             return of(cached);
         }
         return http.get(url, { responseType: 'text' }).pipe(map(normalizer), tap(svg => {
-            void iconCacheDb.set(name, svg);
+            void zIconCacheDb.set(name, svg, { storeName: Z_ICON_CACHE_STORE });
         }), catchError(error => {
             console.error(`[ZIcon] Failed to load "${name}" from ${url}`, error);
             return of(getFallbackIcon(name));