chore(checkbox): avoid passing non-DOM attributes to svg

.changeset/giant-maps-bow.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/shared-icons": patch
+---
+
+avoid passing non-DOM attributes to svg (#3184)

apps/docs/config/routes.json

@@ -179,7 +179,8 @@
           "key": "checkbox",
           "title": "Checkbox",
           "keywords": "checkbox, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox.mdx"
+          "path": "/docs/components/checkbox.mdx",
+          "updated": true
         },
         {
           "key": "checkbox-group",

apps/docs/content/components/checkbox/custom-check-icon.ts

@@ -1,19 +1,15 @@
-const HeartIcon = `export const HeartIcon = ({
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
       fill='fill'
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
@@ -25,14 +21,17 @@ const HeartIcon = `export const HeartIcon = ({
 `;
 
 const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M6 12H18"

apps/docs/content/docs/components/checkbox.mdx

@@ -13,8 +13,6 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -70,6 +68,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 ### Custom Check Icon
 
+> By default, `IconProps` will be passed to your icon component.  Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element.
+
 <CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
 
 ### Controlled

packages/utilities/shared-icons/src/close.tsx

@@ -1,20 +1,35 @@
 import {IconSvgProps} from "./types";
 
-export const CloseIcon = (props: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={2}
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M18 6L6 18M6 6l12 12" />
-  </svg>
-);
+export const CloseIcon = (
+  props: IconSvgProps & {
+    // checkbox icon props
+    "data-checked"?: string;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    disableAnimation?: boolean;
+    className?: string;
+  },
+) => {
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...otherProps}
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+};