@2hoch1/pixel-icon-library-react 1.1.1 → 1.1.3

package/dist/index.d.cts

@@ -467,44 +467,45 @@ interface DynamicPixelIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     name: IconName;
     variant?: IconVariant;
     size?: number | string;
+    title?: string;
     fallback?: ReactNode;
 }
 /**
  * DynamicPixelIcon - Lazy-loads icons at runtime for better code-splitting.
  * Falls back to `fallback` or null if the icon cannot be resolved.
  */
-declare const DynamicPixelIcon: ({ name, variant, size, fallback, ...props }: DynamicPixelIconProps) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
+declare const DynamicPixelIcon: ({ name, variant, size, title, fallback, ...props }: DynamicPixelIconProps) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Minimal SVG element names supported by the icon set.
+ * Mirrors the React 19 `SVGElementType` addition while staying backward compatible.
+ */
+type IconSvgElement =
+  | 'circle'
+  | 'ellipse'
+  | 'g'
+  | 'line'
+  | 'path'
+  | 'polygon'
+  | 'polyline'
+  | 'rect';
+
+type IconNode = [elementName: IconSvgElement, attrs: Record<string, string>][];
+
+type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+
+interface IconBaseProps extends ElementAttributes {
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+type IconComponent = ForwardRefExoticComponent<
+  Omit<IconBaseProps, 'ref'> & RefAttributes<SVGSVGElement>
+>;
 
-/**
- * Minimal SVG element names supported by the icon set.
- * Mirrors the React 19 `SVGElementType` addition while staying backward compatible.
- */
-type IconSvgElement =
-  | 'circle'
-  | 'ellipse'
-  | 'g'
-  | 'line'
-  | 'path'
-  | 'polygon'
-  | 'polyline'
-  | 'rect';
-
-type IconNode = [elementName: IconSvgElement, attrs: Record<string, string>][];
-
-type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
-
-interface IconBaseProps extends ElementAttributes {
-  size?: string | number;
-  absoluteStrokeWidth?: boolean;
-}
-
-type IconComponent = ForwardRefExoticComponent<
-  Omit<IconBaseProps, 'ref'> & RefAttributes<SVGSVGElement>
->;
-
-// Legacy/simple component typing used by the generated registry
-type IconProps = SVGProps<SVGSVGElement> & { title?: string };
+// Legacy/simple component typing used by the generated registry
+type IconProps = SVGProps<SVGSVGElement> & { title?: string };
 type IconComponentFn = ComponentType<IconProps>;
 
 export { DynamicPixelIcon, type ElementAttributes, type IconBaseProps, type IconComponent, type IconComponentFn, IconName, type IconNode, type IconProps, type IconSvgElement, IconVariant, PixelIcon, type SVGAttributes };

package/dist/index.d.ts

@@ -467,44 +467,45 @@ interface DynamicPixelIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     name: IconName;
     variant?: IconVariant;
     size?: number | string;
+    title?: string;
     fallback?: ReactNode;
 }
 /**
  * DynamicPixelIcon - Lazy-loads icons at runtime for better code-splitting.
  * Falls back to `fallback` or null if the icon cannot be resolved.
  */
-declare const DynamicPixelIcon: ({ name, variant, size, fallback, ...props }: DynamicPixelIconProps) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
+declare const DynamicPixelIcon: ({ name, variant, size, title, fallback, ...props }: DynamicPixelIconProps) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Minimal SVG element names supported by the icon set.
+ * Mirrors the React 19 `SVGElementType` addition while staying backward compatible.
+ */
+type IconSvgElement =
+  | 'circle'
+  | 'ellipse'
+  | 'g'
+  | 'line'
+  | 'path'
+  | 'polygon'
+  | 'polyline'
+  | 'rect';
+
+type IconNode = [elementName: IconSvgElement, attrs: Record<string, string>][];
+
+type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+
+interface IconBaseProps extends ElementAttributes {
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+type IconComponent = ForwardRefExoticComponent<
+  Omit<IconBaseProps, 'ref'> & RefAttributes<SVGSVGElement>
+>;
 
-/**
- * Minimal SVG element names supported by the icon set.
- * Mirrors the React 19 `SVGElementType` addition while staying backward compatible.
- */
-type IconSvgElement =
-  | 'circle'
-  | 'ellipse'
-  | 'g'
-  | 'line'
-  | 'path'
-  | 'polygon'
-  | 'polyline'
-  | 'rect';
-
-type IconNode = [elementName: IconSvgElement, attrs: Record<string, string>][];
-
-type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
-
-interface IconBaseProps extends ElementAttributes {
-  size?: string | number;
-  absoluteStrokeWidth?: boolean;
-}
-
-type IconComponent = ForwardRefExoticComponent<
-  Omit<IconBaseProps, 'ref'> & RefAttributes<SVGSVGElement>
->;
-
-// Legacy/simple component typing used by the generated registry
-type IconProps = SVGProps<SVGSVGElement> & { title?: string };
+// Legacy/simple component typing used by the generated registry
+type IconProps = SVGProps<SVGSVGElement> & { title?: string };
 type IconComponentFn = ComponentType<IconProps>;
 
 export { DynamicPixelIcon, type ElementAttributes, type IconBaseProps, type IconComponent, type IconComponentFn, IconName, type IconNode, type IconProps, type IconSvgElement, IconVariant, PixelIcon, type SVGAttributes };

package/dist/index.js

@@ -458,36 +458,39 @@ var dynamicIconImports = {
   "window-close-solid": () => loadIcon("@hackernoon/pixel-icon-library/icons/SVG/solid/window-close-solid.svg")
 };
 var dynamicIconImports_default = dynamicIconImports;
-var defaultSize = 24;
+
+// src/utils/resolveIconName.ts
+function resolveIconName(name, variant) {
+  const hasBrandsSuffix = name.endsWith("-brands");
+  const hasPurcatsSuffix = name.endsWith("-purcats");
+  const hasSolidSuffix = name.endsWith("-solid");
+  const baseName = name.replace(/-brands$/, "").replace(/-purcats$/, "").replace(/-solid$/, "");
+  let targetVariant;
+  if (variant) {
+    targetVariant = variant;
+  } else if (hasBrandsSuffix) {
+    targetVariant = "brands";
+  } else if (hasPurcatsSuffix) {
+    targetVariant = "purcats";
+  } else if (hasSolidSuffix) {
+    targetVariant = "solid";
+  } else {
+    targetVariant = "regular";
+  }
+  const candidate = targetVariant === "regular" ? baseName : `${baseName}-${targetVariant}`;
+  return dynamicIconImports_default[candidate] ? candidate : void 0;
+}
+var DEFAULT_SIZE = 24;
 function PixelIcon({
   name,
   variant,
-  size = defaultSize,
+  size = DEFAULT_SIZE,
   title,
   fallback = null,
   ...rest
 }) {
   const [IconComponent, setIconComponent] = useState();
-  const resolvedName = useMemo(() => {
-    const hasBrandsSuffix = name.endsWith("-brands");
-    const hasPurcatsSuffix = name.endsWith("-purcats");
-    const hasSolidSuffix = name.endsWith("-solid");
-    let baseName = name.replace(/-brands$/, "").replace(/-purcats$/, "").replace(/-solid$/, "");
-    let targetVariant;
-    if (variant) {
-      targetVariant = variant;
-    } else if (hasBrandsSuffix) {
-      targetVariant = "brands";
-    } else if (hasPurcatsSuffix) {
-      targetVariant = "purcats";
-    } else if (hasSolidSuffix) {
-      targetVariant = "solid";
-    } else {
-      targetVariant = "regular";
-    }
-    const candidate = targetVariant === "regular" ? baseName : `${baseName}-${targetVariant}`;
-    return dynamicIconImports_default[candidate] ? candidate : void 0;
-  }, [name, variant]);
+  const resolvedName = useMemo(() => resolveIconName(name, variant), [name, variant]);
   useEffect(() => {
     let cancelled = false;
     if (!resolvedName) {
@@ -508,7 +511,7 @@ function PixelIcon({
     };
   }, [resolvedName]);
   if (!IconComponent) return fallback ?? null;
-  const dimension = typeof size === "number" ? `${size}px` : size ?? `${defaultSize}px`;
+  const dimension = typeof size === "number" ? `${size}px` : size ?? `${DEFAULT_SIZE}px`;
   return /* @__PURE__ */ jsx(
     IconComponent,
     {
@@ -522,41 +525,38 @@ function PixelIcon({
     }
   );
 }
+var lazyCache = /* @__PURE__ */ new Map();
+var DEFAULT_SIZE2 = 24;
 var DynamicPixelIcon = ({
   name,
   variant,
-  size = 24,
+  size = DEFAULT_SIZE2,
+  title,
   fallback = null,
   ...props
 }) => {
-  const dimension = typeof size === "number" ? `${size}px` : size ?? "24px";
-  const resolvedName = useMemo(() => {
-    const hasBrandsSuffix = name.endsWith("-brands");
-    const hasPurcatsSuffix = name.endsWith("-purcats");
-    const hasSolidSuffix = name.endsWith("-solid");
-    let baseName = name.replace(/-brands$/, "").replace(/-purcats$/, "").replace(/-solid$/, "");
-    let targetVariant;
-    if (variant) {
-      targetVariant = variant;
-    } else if (hasBrandsSuffix) {
-      targetVariant = "brands";
-    } else if (hasPurcatsSuffix) {
-      targetVariant = "purcats";
-    } else if (hasSolidSuffix) {
-      targetVariant = "solid";
-    } else {
-      targetVariant = "regular";
-    }
-    const candidate = targetVariant === "regular" ? baseName : `${baseName}-${targetVariant}`;
-    return dynamicIconImports_default[candidate] ? candidate : void 0;
-  }, [name, variant]);
+  const dimension = typeof size === "number" ? `${size}px` : size ?? `${DEFAULT_SIZE2}px`;
+  const resolvedName = useMemo(() => resolveIconName(name, variant), [name, variant]);
   const LazyIcon = useMemo(() => {
     if (!resolvedName) return void 0;
-    const importer = dynamicIconImports_default[resolvedName];
-    return lazy(importer);
+    if (lazyCache.has(resolvedName)) return lazyCache.get(resolvedName);
+    const component = lazy(dynamicIconImports_default[resolvedName]);
+    lazyCache.set(resolvedName, component);
+    return component;
   }, [resolvedName]);
   if (!LazyIcon) return fallback ?? null;
-  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(LazyIcon, { ...props, width: dimension, height: dimension }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
+    LazyIcon,
+    {
+      ...props,
+      width: props.width ?? dimension,
+      height: props.height ?? dimension,
+      "aria-label": props["aria-label"] ?? title ?? name,
+      role: props.role ?? "img",
+      focusable: props.focusable ?? "false",
+      title
+    }
+  ) });
 };
 var SvgAndroid = (props) => /* @__PURE__ */ jsxs("svg", { id: "Android", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props, children: [
   /* @__PURE__ */ jsx("rect", { x: 5, y: 10, width: 1, height: 2 }),