@ncds/ui-admin-icon 0.0.15 → 0.0.16

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,27 @@ 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);
+        IconComponentRef.current = null;
+        let isMounted = true;
         (0, map_1.getIcon)(name)
-            ?.then((module) => {
-            iconRef.current = module.default;
-            setIsLoading(false);
+            ?.then((iconModule) => {
+            if (isMounted && iconModule?.default) {
+                IconComponentRef.current = iconModule.default;
+                forceUpdate({});
+            }
         })
             .catch((error) => {
-            setIsLoading(false);
+            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 });
 };

package/dist/esm/index.js

@@ -1,21 +1,27 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { getIcon } from './map';
 const Icon = ({ name, ...props }) => {
-    const iconRef = useRef(null);
-    const [isLoading, setIsLoading] = useState(true);
+    const IconComponentRef = useRef(null);
+    const [, forceUpdate] = React.useState({});
     useEffect(() => {
-        setIsLoading(true);
+        IconComponentRef.current = null;
+        let isMounted = true;
         getIcon(name)
-            ?.then((module) => {
-            iconRef.current = module.default;
-            setIsLoading(false);
+            ?.then((iconModule) => {
+            if (isMounted && iconModule?.default) {
+                IconComponentRef.current = iconModule.default;
+                forceUpdate({});
+            }
         })
             .catch((error) => {
-            setIsLoading(false);
+            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.createElement(IconComponent, { ...props });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-icon",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "keywords": [
     "icons",
     "react",