@ncds/ui-admin-icon 0.0.15 → 0.0.17

package/README.md

@@ -28,18 +28,25 @@ The default export is a dynamic Icon component that loads icons on demand:
 
 ```jsx
 import Icon from '@ncds/ui-admin-icon';
-import type { IconName } '@ncds/ui-admin-icon';
 
 function MyComponent() {
   return (
     <div>
       <Icon name="plus" />
-      <Icon name="heart" width={24} height={24} fill="red" />
+      <Icon name="heart" width={24} height={24} color="red" />
     </div>
   );
 }
 ```
 
+The type of `name` is defined in the package, so you can use it for type checking:
+
+```ts
+import type { IconName } from '@ncds/ui-admin-icon';
+
+const iconName: IconName = 'plus';
+```
+
 ### Importing individual icons
 
 For better performance, you can import specific icons directly:
@@ -51,7 +58,7 @@ function MyComponent() {
   return (
     <div>
       <Plus />
-      <Heart width={24} height={24} fill="red" />
+      <Heart width={24} height={24} color="red" />
     </div>
   );
 }

package/dist/cjs/index.js

@@ -39,21 +39,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const map_1 = require("./map");
 const Icon = ({ name, ...props }) => {
-    const iconRef = (0, react_1.useRef)(null);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const IconComponentRef = (0, react_1.useRef)(null);
+    const [, forceUpdate] = react_1.default.useState({});
     (0, react_1.useEffect)(() => {
-        setIsLoading(true);
-        (0, map_1.getIcon)(name)
-            ?.then((module) => {
-            iconRef.current = module.default;
-            setIsLoading(false);
-        })
-            .catch((error) => {
-            setIsLoading(false);
-        });
+        IconComponentRef.current = null;
+        let isMounted = true;
+        const iconImport = (0, map_1.getIcon)(name);
+        if (iconImport) {
+            iconImport()
+                .then((iconModule) => {
+                if (isMounted && iconModule?.default) {
+                    IconComponentRef.current = iconModule.default;
+                    forceUpdate({});
+                }
+            })
+                .catch((error) => {
+                console.error(`Error loading icon: ${name}`, error);
+            });
+        }
+        return () => {
+            isMounted = false;
+        };
     }, [name]);
-    const IconComponent = iconRef.current;
-    if (isLoading || !IconComponent)
+    const IconComponent = IconComponentRef.current;
+    if (!IconComponent)
         return null;
     return react_1.default.createElement(IconComponent, { ...props });
 };