feat: support passing icon as slot in icon-button

Author: codebender828

packages/c-button/examples/as-icon-button.vue

@@ -22,10 +22,23 @@
     color-scheme="teal"
   />
   <c-icon-button
-    icon="star"
-    aria-label="Favourite album"
+    aria-label="Documentation Icon"
     mr="3"
     size="lg"
     color-scheme="teal"
-  />
+  >
+    <DocumentationIcon />
+  </c-icon-button>
 </template>
+
+<script lang="ts" setup>
+import { chakra } from "../../vue/src"
+import { CIconButton } from "../src/icon-button"
+
+import { createIcon } from "../../c-icon/src/"
+const DocumentationIcon = createIcon({
+  name: "Documentation",
+  viewBox: "0 2.4 24 24",
+  path: `<path fill="currentColor" d="M6 24.4q-.825 0-1.413-.587T4 22.4v-16q0-.825.588-1.412T6 4.4h12q.825 0 1.413.588T20 6.4v16q0 .825-.588 1.413T18 24.4H6Zm0-2h12v-16h-2v6.125q0 .3-.25.438t-.5-.013L13.5 11.9l-1.75 1.05q-.25.15-.5.013t-.25-.438V6.4H6v16Zm5-16h5h-5Zm-5 0h12H6Z"/>`,
+})
+</script>

packages/c-button/src/icon-button.tsx

@@ -1,20 +1,21 @@
-import { h, defineComponent, PropType, VNode } from "vue"
+import { h, defineComponent, PropType, VNode, type DefineComponent } from "vue"
 import { CButton } from "./button"
-import { ButtonProps } from "./button.utils"
+import type { ButtonProps } from "./button.utils"
 import { CIcon } from "@chakra-ui/c-icon"
+import { chakra } from "@chakra-ui/vue-system"
 
 const IconButtonProps = {
   // ...BUTTON_PROPS,
-  icon: String as PropType<string>,
-  isRound: Boolean as PropType<boolean>,
+  icon: String as PropType<CIconButtonProps["icon"]>,
+  isRound: Boolean as PropType<CIconButtonProps["isRound"]>,
   ariaLabel: {
-    type: String as PropType<string>,
+    type: String as PropType<CIconButtonProps["ariaLabel"]>,
     required: true,
   },
 }
 
 export interface CIconButtonProps extends ButtonProps {
-  icon: string
+  icon: string | object | typeof chakra.svg | DefineComponent
   isRound?: boolean
   ariaLabel: string
 }
@@ -27,22 +28,34 @@ export interface CIconButtonProps extends ButtonProps {
 export const CIconButton = defineComponent({
   name: "CIconButton",
   props: IconButtonProps,
-  setup(props, { attrs }) {
+  setup(props, { attrs, slots }) {
     if (!props.ariaLabel) {
       console.error(
         `chakra-ui: The \`aria-label\` prop is required for the <c-icon-button />`
       )
     }
 
-    return () => (
-      <CButton
-        padding={"0"}
-        rounded={props.isRound ? "rounded" : "md"}
-        aria-label={props.ariaLabel}
-        {...attrs}
-      >
-        <CIcon aria-hidden focusable={0} name={props.icon} />
-      </CButton>
-    )
+    return () => {
+      const children = slots?.default?.()
+      return (
+        <CButton
+          padding={"0"}
+          rounded={props.isRound ? "rounded" : "md"}
+          aria-label={props.ariaLabel}
+          {...attrs}
+        >
+          {!!children ? (
+            children
+          ) : typeof props.icon === "string" ? (
+            <CIcon aria-hidden focusable={0} name={props.icon} />
+          ) : (
+            <CIcon __label="button__icon" {...attrs}>
+              {/* @ts-ignore */}
+              <props.icon />
+            </CIcon>
+          )}
+        </CButton>
+      )
+    }
   },
 })