@brightlocal/icons 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightlocal/icons",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "BrightLocal Design System Icons - Lucide defaults and custom icons",
   "type": "module",
   "private": false,

package/src/dynamic.ts

@@ -28,3 +28,7 @@ export type { FlagIconName } from "./flag/dynamic-imports.js";
 
 export { socialMediaIconNames } from "./social-media/dynamic-imports.js";
 export type { SocialMediaIconName } from "./social-media/dynamic-imports.js";
+
+// Higher-level flag wrapper with unknown-country fallback and loading skeleton
+export { DynamicFlagIcon } from "./flag/flag-icon.js";
+export type { DynamicFlagIconProps } from "./flag/flag-icon.js";

package/src/flag/flag-icon.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { DynamicIcon } from "../icons/dynamic-icon.js";
+import { flagIconNames, type FlagIconName } from "./dynamic-imports.js";
+import { Globe } from "../icons/lucide-exports.js";
+
+export interface DynamicFlagIconProps
+  extends React.ComponentProps<"span"> {
+  /** ISO 3166-1 alpha-3 country code (e.g. "USA", "GBR") */
+  country: string;
+  /**
+   * Icon size in pixels (width and height)
+   * @default 20
+   */
+  size?: number;
+}
+
+const flagIconNameSet = new Set<string>(flagIconNames);
+
+const DynamicFlagIcon = React.forwardRef<HTMLSpanElement, DynamicFlagIconProps>(
+  ({ country, size = 20, className, style, ...props }, ref) => {
+    const isKnown = flagIconNameSet.has(country);
+
+    return (
+      <span
+        ref={ref}
+        aria-hidden="true"
+        className={className}
+        data-slot="flag-icon"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          width: size,
+          height: size,
+          ...style,
+        }}
+        {...props}
+      >
+        {isKnown ? (
+          <DynamicIcon
+            name={country as FlagIconName}
+            size={size}
+          />
+        ) : (
+          <span
+            data-slot="flag-icon-fallback"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: size,
+              height: size,
+              borderRadius: "9999px",
+              backgroundColor: "var(--color-muted, #f3f4f6)",
+              color: "var(--color-muted-foreground, #6b7280)",
+            }}
+          >
+            <Globe size={Math.round(size * 0.65)} />
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+
+DynamicFlagIcon.displayName = "DynamicFlagIcon";
+
+export { DynamicFlagIcon };

package/src/icons/dynamic-icon.tsx

@@ -37,7 +37,7 @@ export interface DynamicIconProps extends React.ComponentProps<"svg"> {
   absoluteStrokeWidth?: boolean;
   /**
    * Fallback content displayed while the icon is loading.
-   * @default null
+   * Defaults to an invisible placeholder that matches the icon's dimensions to prevent layout shift.
    */
   fallback?: React.ReactNode;
 }
@@ -85,6 +85,10 @@ for (const [name, loader] of Object.entries(iconImports)) {
  * <DynamicIcon name="camera" size={24} fallback={<Skeleton />} />
  *
  * @example
+ * // Opt out of default placeholder
+ * <DynamicIcon name="camera" size={24} fallback={null} />
+ *
+ * @example
  * // Database-driven
  * <DynamicIcon name={country.iso} size={16} />
  */
@@ -95,7 +99,7 @@ export const DynamicIcon = React.forwardRef<SVGSVGElement, DynamicIconProps>(
       size = 16,
       strokeWidth = 1.33,
       absoluteStrokeWidth = true,
-      fallback = null,
+      fallback,
       ...props
     },
     ref
@@ -114,8 +118,23 @@ export const DynamicIcon = React.forwardRef<SVGSVGElement, DynamicIconProps>(
       ? { ref, size, strokeWidth, absoluteStrokeWidth, ...props }
       : { ref, size, ...props };
 
+    const placeholder =
+      fallback !== undefined ? (
+        fallback
+      ) : (
+        <span
+          aria-hidden="true"
+          style={{
+            display: "inline-block",
+            width: size,
+            height: size,
+            flexShrink: 0,
+          }}
+        />
+      );
+
     return (
-      <React.Suspense fallback={fallback}>
+      <React.Suspense fallback={placeholder}>
         <Icon {...iconProps} />
       </React.Suspense>
     );

package/src/index.ts

@@ -11,6 +11,10 @@ export * from "./icons/lucide-exports.js";
 export { createLucideIcon } from "lucide-react";
 export type { IconNode, LucideProps } from "lucide-react";
 
+// Higher-level flag wrapper with unknown-country fallback and loading skeleton
+export { DynamicFlagIcon } from "./flag/flag-icon.js";
+export type { DynamicFlagIconProps } from "./flag/flag-icon.js";
+
 // Flag icons - Full list available via barrel exports
 // All icons are React SVG components with proper fill colors
 export * from "./flag/index.js";