Merge pull request #265 from chakra-ui/feat/inline-icons

feat/inline icons

Author: codebender828

.changeset/nasty-plums-greet.md

@@ -0,0 +1,44 @@
+---
+"@chakra-ui/c-visually-hidden": minor
+"@chakra-ui/c-theme-provider": minor
+"@chakra-ui/vue-composables": minor
+"@chakra-ui/c-close-button": minor
+"@chakra-ui/c-form-control": minor
+"@chakra-ui/c-media-query": minor
+"@chakra-ui/c-scroll-lock": minor
+"@chakra-ui/c-breadcrumb": minor
+"@chakra-ui/c-color-mode": minor
+"@chakra-ui/c-focus-lock": minor
+"@chakra-ui/c-accordion": minor
+"@chakra-ui/c-pin-input": minor
+"@chakra-ui/c-checkbox": minor
+"@chakra-ui/c-skip-nav": minor
+"@chakra-ui/vue-test-utils": minor
+"@chakra-ui/vue-auto-import": minor
+"@chakra-ui/c-spinner": minor
+"@chakra-ui/c-avatar": minor
+"@chakra-ui/c-button": minor
+"@chakra-ui/c-motion": minor
+"@chakra-ui/c-popper": minor
+"@chakra-ui/c-portal": minor
+"@chakra-ui/vue-accessibilty": minor
+"@chakra-ui/c-alert": minor
+"@chakra-ui/c-image": minor
+"@chakra-ui/c-input": minor
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-reset": minor
+"@chakra-ui/c-toast": minor
+"@chakra-ui/c-code": minor
+"@chakra-ui/c-icon": minor
+"@chakra-ui/c-menu": minor
+"@chakra-ui/vue-layout": minor
+"@chakra-ui/vue-styled": minor
+"@chakra-ui/vue-system": minor
+"@chakra-ui/c-tag": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/nuxt-next": minor
+"@chakra-ui/vue-next": minor
+---
+
+adds `createIcon` api to allow consumers to inline icons they want to use o the
+fly"

modules/nuxt/src/module.ts

@@ -117,6 +117,7 @@ export default defineNuxtModule<ChakraModuleOptions>({
     // Include all internal lodash modules
     // to the optimized dependencies since they do not
     // natively export ESM modules.
+    // We should still preserve user-provided option
     const viteConfig = nuxt.options.vite || {}
     const extendedViteConfigOptions = {
       optimizeDeps: {

modules/nuxt/src/runtime/chakra.ts

@@ -7,8 +7,8 @@ import Chakra, {
   ColorModeConstants,
   extendTheme,
   ColorModeScriptProps,
+  domElements,
 } from "@chakra-ui/vue-next"
-import { domElements } from "@chakra-ui/vue-system"
 import { parseCookies } from "h3"
 import type { ChakraModuleOptions } from "../module"
 
@@ -70,6 +70,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       colorModeManager: cookieStorageManagerSSR(
         ColorModeConstants.CookieStorageKey
       ),
+      icons: chakraConfig.icons,
     })
   )
 

packages/c-button/src/button.tsx

@@ -5,6 +5,7 @@ import {
   h,
   Fragment,
   SetupContext,
+  DefineComponent,
 } from "vue"
 import {
   chakra,
@@ -58,15 +59,15 @@ const CButtonSpinner = defineComponent({
 })
 
 interface CButtonContentProps {
-  leftIcon?: string
-  rightIcon?: string
+  leftIcon?: string | object | typeof chakra.svg | DefineComponent
+  rightIcon?: string | object | typeof chakra.svg | DefineComponent
   iconSpacing?: CButtonSpinnerProps["spacing"]
 }
 const CButtonContent = defineComponent({
   name: "CButtonContent",
   props: {
-    leftIcon: String as PropType<CButtonContentProps["leftIcon"]>,
-    rightIcon: String as PropType<CButtonContentProps["rightIcon"]>,
+    leftIcon: [String, Object] as PropType<CButtonContentProps["leftIcon"]>,
+    rightIcon: [String, Object] as PropType<CButtonContentProps["rightIcon"]>,
     iconSpacing: String as PropType<CButtonContentProps["iconSpacing"]>,
   },
   setup(props, { slots }) {
@@ -92,10 +93,18 @@ const CButtonContent = defineComponent({
 const CButtonIcon = defineComponent({
   name: "CButtonIcon",
   props: {
-    icon: String as PropType<string>,
+    icon: [String, Object] as PropType<string | object | DefineComponent>,
   },
   setup(props, { attrs }) {
-    return () => <CIcon __label="button__icon" name={props.icon} {...attrs} />
+    return () =>
+      typeof props.icon === "string" ? (
+        <CIcon __label="button__icon" name={props.icon} {...attrs} />
+      ) : (
+        <CIcon __label="button__icon" {...attrs}>
+          {/* @ts-ignore */}
+          <props.icon />
+        </CIcon>
+      )
   },
 })
 
@@ -130,10 +139,10 @@ export const CButton = defineComponent({
       type: String as PropType<ButtonProps["type"]>,
     },
     leftIcon: {
-      type: String as PropType<ButtonProps["leftIcon"]>,
+      type: [String, Object] as PropType<ButtonProps["leftIcon"]>,
     },
     rightIcon: {
-      type: String as PropType<ButtonProps["rightIcon"]>,
+      type: [String, Object] as PropType<ButtonProps["rightIcon"]>,
     },
     iconSpacing: {
       type: SNAO as PropType<ButtonProps["iconSpacing"]>,

packages/c-button/src/button.utils.ts

@@ -1,6 +1,7 @@
 import { SystemProps } from "@chakra-ui/styled-system"
 import { BaseThemedComponentProps } from "@chakra-ui/vue-utils"
-import { DOMElements } from "@chakra-ui/vue-system"
+import { DOMElements, chakra } from "@chakra-ui/vue-system"
+import type { DefineComponent } from "vue"
 
 type ButtonTypes = "button" | "reset" | "submit"
 
@@ -12,8 +13,8 @@ export interface ButtonProps extends BaseThemedComponentProps {
   loadingText?: string
   isFullWidth?: boolean
   type?: ButtonTypes
-  leftIcon?: string
-  rightIcon?: string
+  leftIcon?: string | object | typeof chakra.svg | DefineComponent
+  rightIcon?: string | object | typeof chakra.svg | DefineComponent
   spinnerPlacement?: "start" | "end"
   iconSpacing?: SystemProps["marginRight"]
 }

packages/c-icon/README.md

@@ -10,7 +10,25 @@ yarn add @chakra-ui/c-icon
 npm i @chakra-ui/c-icon
 ```
 
-### Adding custom icons
+### Creating inline icons
+If you with to create new icons on the fly, you can create an icon component which accepts Chakra UI style props using the `createIcon` API as shown below:
+```ts
+
+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"/>`,
+})
+
+```
+This creates a `DocumentationIcon` component that you can style with Chakra UI props as shown in the template below:
+```vue
+<template>
+  <DocumentationIcon :box-size="20" color="tomato" />
+</template>
+```
+
+### Adding custom icons to theme
 All Chakra icons are registered in the Chakra plugin under the `icons.extend` key. So you
 can extend this object to add your own icons. Here are the steps:
 

packages/c-icon/examples/with-custom-icon.vue

@@ -1,5 +1,17 @@
 <template>
   <div>
-    <c-icon size="10" name="discord" />
+    <c-h-stack>
+      <c-icon size="10" name="discord" />
+      <InlineDocumentationIcon :box-size="20" />
+    </c-h-stack>
   </div>
 </template>
+
+<script setup lang="ts">
+import { createIcon } from "../src"
+const InlineDocumentationIcon = 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-icon/src/icon.tsx

@@ -5,18 +5,12 @@ import {
   inject,
   SVGAttributes,
   PropType,
-  Fragment,
   DefineComponent,
 } from "vue"
-import {
-  chakra,
-  ChakraProps,
-  ComponentWithProps,
-  DeepPartial,
-  HTMLChakraProps,
-} from "@chakra-ui/vue-system"
+import { chakra, ChakraProps } from "@chakra-ui/vue-system"
 import type {} from "@vue/runtime-core"
 import { SNAO, camelCase, mergeWith } from "@chakra-ui/vue-utils"
+import { omit } from "@chakra-ui/utils"
 
 const fallbackIcon = {
   path: `
@@ -113,3 +107,41 @@ export function createIconComponent(name: string) {
   iconComponent.name = componentName
   return iconComponent
 }
+
+export interface CreateIconOptions {
+  name: string
+  path: string
+  viewBox?: string
+}
+
+const createIconProps = omit(_iconProps, ["name"])
+export function createIcon(options: CreateIconOptions) {
+  const componentName = camelCase(options.name)
+  const iconComponent = defineComponent({
+    name: componentName,
+    props: createIconProps,
+    setup(props, { slots, attrs }) {
+      const hasDefaultSlot = computed(() => slots?.default?.()?.length)
+      const vnodeProps = computed(() => ({
+        w: props.size,
+        h: props.size,
+        display: "inline-block",
+        lineHeight: "1em",
+        flexShrink: 0,
+        color: "currentColor",
+        ...(!hasDefaultSlot.value && {
+          innerHTML: options.path,
+        }),
+        focusable: false,
+        viewBox: options.viewBox || fallbackIcon.viewBox,
+      }))
+
+      return () => (
+        <chakra.svg __label="icon" {...vnodeProps.value} {...attrs}>
+          {slots.default?.()}
+        </chakra.svg>
+      )
+    },
+  })
+  return iconComponent
+}

scripts/utils/exports/inspector.ts

@@ -0,0 +1,41 @@
+import * as ts from "typescript"
+import { resolve } from "path"
+
+function findExports(fileNames: string[], options: ts.CompilerOptions): void {
+  let program = ts.createProgram(fileNames, options)
+
+  const checker = program.getTypeChecker()
+
+  const namedExports = new Map<string, ts.Symbol["escapedName"][]>()
+
+  fileNames.forEach((file) => {
+    const sourceFile = program.getSourceFile(file)
+    if (!sourceFile) return console.info("No sourceFile found at ", file)
+
+    const sourceFileSymbol = checker.getSymbolAtLocation(sourceFile)!
+    const exports = checker
+      .getExportsOfModule(sourceFileSymbol)
+      .filter((symbol) => symbol.escapedName !== "default")
+      .map((symbol) => {
+        console.log("symbol", symbol)
+
+        return symbol.escapedName
+      })
+
+    namedExports.set(file, exports)
+  })
+
+  namedExports.forEach((exports, file) => {
+    console.log(`Named exports from ${file}:`)
+    exports.forEach((exportName) => {
+      console.log(`- ${exportName}`)
+    })
+  })
+}
+
+findExports([resolve(__dirname, "./lib-example/index.ts")], {
+  noEmitOnError: true,
+  noImplicitAny: true,
+  target: ts.ScriptTarget.ES5,
+  module: ts.ModuleKind.CommonJS,
+})

scripts/utils/exports/lib-example/accordion.ts

@@ -0,0 +1,15 @@
+import { defineComponent, h } from "vue"
+
+export interface CAccordionProps {
+  name: string
+  activeIndex: number
+}
+export const CAccordion = defineComponent((props: CAccordionProps) => {
+  return () => h("div", "Hello Accordion")
+})
+
+const CAccordionDefaultExport = {
+  some: "random",
+  object: true,
+}
+export default CAccordionDefaultExport