@djangocfg/layouts 2.1.572 → 2.1.573

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.572",
+  "version": "2.1.573",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -90,11 +90,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.572",
-    "@djangocfg/api": "^2.1.572",
-    "@djangocfg/devtools": "^2.1.572",
-    "@djangocfg/i18n": "^2.1.572",
-    "@djangocfg/ui-core": "^2.1.572",
+    "@djangocfg/analytics": "^2.1.573",
+    "@djangocfg/api": "^2.1.573",
+    "@djangocfg/devtools": "^2.1.573",
+    "@djangocfg/i18n": "^2.1.573",
+    "@djangocfg/ui-core": "^2.1.573",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,12 +124,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.572",
-    "@djangocfg/api": "^2.1.572",
-    "@djangocfg/devtools": "^2.1.572",
-    "@djangocfg/i18n": "^2.1.572",
-    "@djangocfg/typescript-config": "^2.1.572",
-    "@djangocfg/ui-core": "^2.1.572",
+    "@djangocfg/analytics": "^2.1.573",
+    "@djangocfg/api": "^2.1.573",
+    "@djangocfg/devtools": "^2.1.573",
+    "@djangocfg/i18n": "^2.1.573",
+    "@djangocfg/typescript-config": "^2.1.573",
+    "@djangocfg/ui-core": "^2.1.573",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/components/core/LucideIcon.tsx

@@ -6,22 +6,27 @@
  *
  * Usage:
  * ```tsx
- * // By name (string)
+ * // By name (string) — PascalCase or kebab-case
  * <LucideIcon icon="CloudLightning" className="w-4 h-4" />
  *
  * // By component
  * import { CloudLightning } from 'lucide-react';
  * <LucideIcon icon={CloudLightning} className="w-4 h-4" />
  * ```
+ *
+ * A name loads that one icon on demand. `import * as` from lucide-react put
+ * all ~1,600 icons (~180 KB gz) into every app that reached this barrel.
  */
 
 'use client';
 
-import * as LucideIcons from 'lucide-react';
+import { CloudLightning } from 'lucide-react';
+import { DynamicIcon, iconNames } from 'lucide-react/dynamic';
 import React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
+import type { IconName } from 'lucide-react/dynamic';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
 export interface LucideIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'children'> {
   /**
@@ -41,52 +46,41 @@ export interface LucideIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ch
   className?: string;
 }
 
-/**
- * Get Lucide icon by name or return the icon component
- * @param icon - Icon name (string) or LucideIcon component
- * @param fallback - Fallback icon if name not found (default: CloudLightning)
- * @returns LucideIcon component
- */
-function getLucideIcon(
-  icon: LucideIconType | string | undefined,
-  fallback: LucideIconType = LucideIcons.CloudLightning
-): LucideIconType {
-  if (!icon) {
-    return fallback;
-  }
-
-  if (typeof icon === 'string') {
-    const IconComponent = LucideIcons[icon as keyof typeof LucideIcons] as LucideIconType | undefined;
-    return IconComponent || fallback;
-  }
+// "ArrowUp01" and "arrow-up-0-1" both fold to "arrowup01".
+let byFolded: Map<string, IconName> | undefined;
 
-  return icon;
+function resolveIconName(name: string): IconName | undefined {
+  byFolded ??= new Map(iconNames.map((n) => [n.replace(/-/g, ''), n as IconName]));
+  return byFolded.get(name.replace(/[-_\s]/g, '').toLowerCase());
 }
 
 /**
  * LucideIcon Component
  *
  * Renders a Lucide icon either by name (string) or by component reference.
- * Automatically resolves icon names from lucide-react package.
- *
- * Usage:
- * ```tsx
- * // By name (string)
- * <LucideIcon icon="CloudLightning" className="w-4 h-4" />
- *
- * // By component
- * import { CloudLightning } from 'lucide-react';
- * <LucideIcon icon={CloudLightning} className="w-4 h-4" />
- * ```
+ * A name renders an empty box of the same size until its icon loads.
  */
 export function LucideIcon({
   icon,
-  fallback = LucideIcons.CloudLightning,
+  fallback = CloudLightning,
   className,
   ...props
 }: LucideIconProps) {
-  const IconComponent = getLucideIcon(icon, fallback);
+  if (typeof icon === 'string') {
+    const name = resolveIconName(icon);
+    if (name) {
+      const Placeholder = () => <span aria-hidden className={cn('inline-block', className)} />;
+      return (
+        <DynamicIcon
+          {...(props as Omit<React.SVGProps<SVGSVGElement>, 'ref' | 'name'>)}
+          name={name}
+          className={cn(className)}
+          fallback={Placeholder}
+        />
+      );
+    }
+  }
 
+  const IconComponent = icon && typeof icon !== 'string' ? icon : fallback;
   return <IconComponent className={cn(className)} {...props} />;
 }
-