fix(clerk-js): Fix custom icons props

clerk · Oct 24, 2023 · 21fbeda · 21fbeda
1 parent 82ed0bc
commit 21fbeda
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx b/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx
@@ -5,7 +5,7 @@ type ExternalElementMounterProps = {
   unmount: (el?: HTMLDivElement) => void;
 };
 
-export const ExternalElementMounter = ({ mount, unmount }: ExternalElementMounterProps) => {
+export const ExternalElementMounter = ({ mount, unmount, ...rest }: ExternalElementMounterProps) => {
   const nodeRef = useRef(null);
 
   useEffect(() => {
@@ -19,5 +19,10 @@ export const ExternalElementMounter = ({ mount, unmount }: ExternalElementMounte
     };
   }, [nodeRef.current]);
 
-  return <div ref={nodeRef}></div>;
+  return (
+    <div
+      ref={nodeRef}
+      {...rest}
+    ></div>
+  );
 };
diff --git a/packages/clerk-js/src/ui/utils/createCustomPages.tsx b/packages/clerk-js/src/ui/utils/createCustomPages.tsx
@@ -121,10 +121,11 @@ const getRoutesAndContents = ({ customPages, defaultRoutes }: GetRoutesAndConten
       return {
         name: cp.label,
         id: `custom-page-${index}`,
-        icon: () => (
+        icon: props => (
           <ExternalElementMounter
             mount={cp.mountIcon}
             unmount={cp.unmountIcon}
+            {...props}
           />
         ),
         path: sanitizeCustomLinkURL(cp.url),
@@ -137,10 +138,11 @@ const getRoutesAndContents = ({ customPages, defaultRoutes }: GetRoutesAndConten
       return {
         name: cp.label,
         id: `custom-page-${index}`,
-        icon: () => (
+        icon: props => (
           <ExternalElementMounter
             mount={cp.mountIcon}
             unmount={cp.unmountIcon}
+            {...props}
           />
         ),
         path: pageURL,