salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimizaiton

Browse Source
This commit is contained in:
alorig
2025-11-09 22:17:23 +05:00
parent b4634bfb1d
commit 1d7cbeffb6
3 changed files with 442 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/icons/lazy.ts Normal file
View File

@@ -0,0 +1,102 @@
/**
* Lazy Icon Loader
*
* This module provides lazy-loaded icons to reduce initial bundle size.
* Icons are only loaded when actually used, not on initial page load.
*
* Usage:
* import { lazyIcon } from '@/icons/lazy';
* const PlusIcon = lazyIcon('plus');
*/
import { lazy, ComponentType } from 'react';
// Icon name to component mapping
const iconMap: Record<string, () => Promise<{ default: ComponentType<any> }>> = {
'plus': () => import('./plus.svg?react').then(m => ({ default: m.ReactComponent })),
'close': () => import('./close.svg?react').then(m => ({ default: m.ReactComponent })),
'box': () => import('./box.svg?react').then(m => ({ default: m.ReactComponent })),
'check-circle': () => import('./check-circle.svg?react').then(m => ({ default: m.ReactComponent })),
'alert': () => import('./alert.svg?react').then(m => ({ default: m.ReactComponent })),
'info': () => import('./info.svg?react').then(m => ({ default: m.ReactComponent })),
'error': () => import('./info-error.svg?react').then(m => ({ default: m.ReactComponent })),
'bolt': () => import('./bolt.svg?react').then(m => ({ default: m.ReactComponent })),
'arrow-up': () => import('./arrow-up.svg?react').then(m => ({ default: m.ReactComponent })),
'arrow-down': () => import('./arrow-down.svg?react').then(m => ({ default: m.ReactComponent })),
'folder': () => import('./folder.svg?react').then(m => ({ default: m.ReactComponent })),
'videos': () => import('./videos.svg?react').then(m => ({ default: m.ReactComponent })),
'audio': () => import('./audio.svg?react').then(m => ({ default: m.ReactComponent })),
'grid': () => import('./grid.svg?react').then(m => ({ default: m.ReactComponent })),
'file': () => import('./file.svg?react').then(m => ({ default: m.ReactComponent })),
'download': () => import('./download.svg?react').then(m => ({ default: m.ReactComponent })),
'arrow-right': () => import('./arrow-right.svg?react').then(m => ({ default: m.ReactComponent })),
'group': () => import('./group.svg?react').then(m => ({ default: m.ReactComponent })),
'box-line': () => import('./box-line.svg?react').then(m => ({ default: m.ReactComponent })),
'shooting-star': () => import('./shooting-star.svg?react').then(m => ({ default: m.ReactComponent })),
'dollar-line': () => import('./dollar-line.svg?react').then(m => ({ default: m.ReactComponent })),
'trash': () => import('./trash.svg?react').then(m => ({ default: m.ReactComponent })),
'angle-up': () => import('./angle-up.svg?react').then(m => ({ default: m.ReactComponent })),
'angle-down': () => import('./angle-down.svg?react').then(m => ({ default: m.ReactComponent })),
'angle-left': () => import('./angle-left.svg?react').then(m => ({ default: m.ReactComponent })),
'angle-right': () => import('./angle-right.svg?react').then(m => ({ default: m.ReactComponent })),
'pencil': () => import('./pencil.svg?react').then(m => ({ default: m.ReactComponent })),
'check-line': () => import('./check-line.svg?react').then(m => ({ default: m.ReactComponent })),
'close-line': () => import('./close-line.svg?react').then(m => ({ default: m.ReactComponent })),
'chevron-down': () => import('./chevron-down.svg?react').then(m => ({ default: m.ReactComponent })),
'chevron-up': () => import('./chevron-up.svg?react').then(m => ({ default: m.ReactComponent })),
'paper-plane': () => import('./paper-plane.svg?react').then(m => ({ default: m.ReactComponent })),
'lock': () => import('./lock.svg?react').then(m => ({ default: m.ReactComponent })),
'envelope': () => import('./envelope.svg?react').then(m => ({ default: m.ReactComponent })),
'user-line': () => import('./user-line.svg?react').then(m => ({ default: m.ReactComponent })),
'calender-line': () => import('./calender-line.svg?react').then(m => ({ default: m.ReactComponent })),
'eye': () => import('./eye.svg?react').then(m => ({ default: m.ReactComponent })),
'eye-close': () => import('./eye-close.svg?react').then(m => ({ default: m.ReactComponent })),
'time': () => import('./time.svg?react').then(m => ({ default: m.ReactComponent })),
'copy': () => import('./copy.svg?react').then(m => ({ default: m.ReactComponent })),
'chevron-left': () => import('./chevron-left.svg?react').then(m => ({ default: m.ReactComponent })),
'user-circle': () => import('./user-circle.svg?react').then(m => ({ default: m.ReactComponent })),
'task-icon': () => import('./task-icon.svg?react').then(m => ({ default: m.ReactComponent })),
'list': () => import('./list.svg?react').then(m => ({ default: m.ReactComponent })),
'table': () => import('./table.svg?react').then(m => ({ default: m.ReactComponent })),
'page': () => import('./page.svg?react').then(m => ({ default: m.ReactComponent })),
'pie-chart': () => import('./pie-chart.svg?react').then(m => ({ default: m.ReactComponent })),
'box-cube': () => import('./box-cube.svg?react').then(m => ({ default: m.ReactComponent })),
'plug-in': () => import('./plug-in.svg?react').then(m => ({ default: m.ReactComponent })),
'docs': () => import('./docs.svg?react').then(m => ({ default: m.ReactComponent })),
'mail-line': () => import('./mail-line.svg?react').then(m => ({ default: m.ReactComponent })),
'horizontal-dots': () => import('./horizontal-dots.svg?react').then(m => ({ default: m.ReactComponent })),
'chat': () => import('./chat.svg?react').then(m => ({ default: m.ReactComponent })),
'moredot': () => import('./moredot.svg?react').then(m => ({ default: m.ReactComponent })),
'alert-hexa': () => import('./alert-hexa.svg?react').then(m => ({ default: m.ReactComponent })),
'info-hexa': () => import('./info-hexa.svg?react').then(m => ({ default: m.ReactComponent })),
};
/**
* Get a lazy-loaded icon component
* @param iconName - Name of the icon (without .svg extension)
* @returns Lazy-loaded React component
*/
export function lazyIcon(iconName: string): ComponentType<any> {
const loader = iconMap[iconName];
if (!loader) {
console.warn(`Icon "${iconName}" not found. Available icons: ${Object.keys(iconMap).join(', ')}`);
// Return a placeholder component
return () => <span>?</span>;
}
return lazy(loader);
}
/**
* Preload commonly used icons (optional optimization)
* Call this early in your app to preload icons that are used on every page
*/
export function preloadCommonIcons() {
const commonIcons = ['plus', 'close', 'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right'];
commonIcons.forEach(iconName => {
const loader = iconMap[iconName];
if (loader) {
loader(); // Start loading but don't await
}
});
}