@brightlocal/icons 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightlocal/icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "BrightLocal Design System Icons - Lucide defaults and custom icons",
   "type": "module",
   "private": false,
@@ -71,6 +71,24 @@
       "import": "./dist/social-media/*.js",
       "require": "./dist/social-media/*.cjs"
     },
+    "./custom": {
+      "source": {
+        "types": "./src/custom/index.ts",
+        "import": "./src/custom/index.ts"
+      },
+      "types": "./dist/custom/index.d.ts",
+      "import": "./dist/custom/index.js",
+      "require": "./dist/custom/index.cjs"
+    },
+    "./custom/*": {
+      "source": {
+        "types": "./src/custom/*.tsx",
+        "import": "./src/custom/*.tsx"
+      },
+      "types": "./dist/custom/*.d.ts",
+      "import": "./dist/custom/*.js",
+      "require": "./dist/custom/*.cjs"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -83,6 +101,9 @@
       ],
       "social-media/*": [
         "dist/social-media/*"
+      ],
+      "custom/*": [
+        "dist/custom/*"
       ]
     }
   },
@@ -100,15 +121,15 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
     "@workspace/eslint-config": "workspace:*",
     "@workspace/typescript-config": "workspace:*",
-    "glob": "^11.0.0",
+    "glob": "^11.1.0",
     "tsx": "^4.20.6",
-    "typescript": "5.7.3",
-    "vite": "^6.2.0",
+    "typescript": "5.9.3",
+    "vite": "^6.4.1",
     "vite-plugin-dts": "^4.3.0"
   },
   "dependencies": {

package/src/assets/custom/start-rating.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FACC15"/>
+</svg>

package/src/custom/index.ts

@@ -0,0 +1,4 @@
+// Custom icons that differ from lucide-react defaults
+// These icons are designed to match specific Figma specifications
+
+export { StarRating } from "./star-rating.js";

package/src/custom/star-rating.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+/**
+ * Custom star icon with sharp edges (no curved corners)
+ * Used specifically for the Rating component to match Figma design
+ *
+ * Unlike lucide-react's Star icon which has rounded strokeLinejoin,
+ * this icon uses miter joins for crisp, pointed edges.
+ */
+export const StarRating = React.forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>(({ className, ...props }, ref) => (
+  <svg
+    ref={ref}
+    aria-hidden="true"
+    className={className}
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="miter"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+  </svg>
+));
+
+StarRating.displayName = "StarRating";

package/src/icons/dynamic-icon.tsx

@@ -24,11 +24,31 @@ export interface DynamicIconProps extends React.ComponentProps<"svg"> {
   color?: string;
   /**
    * Stroke width for line icons
-   * @default 2
+   * @default 1.33
    */
   strokeWidth?: number;
 }
 
+/**
+ * Pre-create all lazy components at module load time.
+ * React.lazy() still defers the actual icon import until the component is rendered,
+ * maintaining code-splitting benefits. This only creates lightweight lazy wrappers.
+ */
+const lazyIcons: Record<
+  string,
+  React.LazyExoticComponent<React.ComponentType<IconComponentProps>>
+> = {};
+
+for (const [name, loader] of Object.entries(iconImports)) {
+  if (loader) {
+    lazyIcons[name] = React.lazy(
+      loader as () => Promise<{
+        default: React.ComponentType<IconComponentProps>;
+      }>
+    );
+  }
+}
+
 /**
  * DynamicIcon component for rendering icons by name at runtime.
  *
@@ -58,21 +78,10 @@ export interface DynamicIconProps extends React.ComponentProps<"svg"> {
  */
 export const DynamicIcon = React.forwardRef<SVGSVGElement, DynamicIconProps>(
   ({ name, size = 24, ...props }, ref) => {
-    const loader = iconImports[name as IconImportName];
-
-    const Icon = React.useMemo(() => {
-      if (!loader) {
-        console.warn(`Icon "${name}" not found in iconImports`);
-        return null;
-      }
-      return React.lazy(
-        loader as () => Promise<{
-          default: React.ComponentType<IconComponentProps>;
-        }>
-      );
-    }, [loader, name]);
+    const Icon = lazyIcons[name];
 
     if (!Icon) {
+      console.warn(`Icon "${name}" not found in iconImports`);
       return null;
     }
 

package/src/index.ts

@@ -22,3 +22,7 @@ export * from "./flag/index.js";
 // Social Media icons - Full list available via barrel exports
 // All icons are React SVG components with proper fill colors
 export * from "./social-media/index.js";
+
+// Custom icons - Icons that differ from lucide-react defaults
+// Designed to match specific Figma specifications
+export * from "./custom/index.js";