feat(c-icon): create icon component

Author: codebender828

_templates/generator/component/component.ts.ejs.t

@@ -3,15 +3,16 @@ to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
 ---
 
 import { h, defineComponent, PropType } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
 
-export const <%= h.changeCase.pascalCase(name) %> = defineComponent({
+export const CIcon = defineComponent({
   props: {
     as: {
-      type: Object as PropType<string>,
+      type: [Object, String] as PropType<DOMElements>,
       default: 'div',
     },
   },
   setup(props, { slots, attrs }) {
-    return h(props?.as, { ...attrs }, slots.default?.())
+    return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })

packages/c-icon/src/index.ts

@@ -1,13 +1,14 @@
 import { h, defineComponent, PropType } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
 
 export const CIcon = defineComponent({
   props: {
     as: {
-      type: Object as PropType<string>,
+      type: [Object, String] as PropType<DOMElements>,
       default: 'div',
     },
   },
   setup(props, { slots, attrs }) {
-    return h(props?.as, { ...attrs }, slots.default?.())
+    return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })

playground/src/.generated/resolver.js

@@ -3,6 +3,7 @@
   '@chakra-ui/c-accordion': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-accordion/src/index.ts',
   '@chakra-ui/c-alert': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-alert/src/index.ts',
   '@chakra-ui/c-button': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-button/src/index.ts',
+  '@chakra-ui/c-icon': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-icon/src/index.ts',
   '@chakra-ui/c-theme-provider': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-theme-provider/src/index.ts',
   '@chakra-ui/system': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/system/src/index.ts',
   '@chakra-ui/test-utils': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/test-utils/src/index.ts',