feat: consume internal icons

Author: codebender828

packages/c-icon/examples/base-icon.vue

@@ -1,15 +1,14 @@
 <template>
   <div>
-    <c-icon> HELLO ALERT </c-icon>
+    <c-icon name="star" />
   </div>
 </template>
 
 <script lang="ts">
-// import { CIcon } from '@chakra-ui/c-icon/src'
-// import { defineComponent } from 'vue'
+import { CIcon } from '@chakra-ui/c-icon/src'
+import { defineComponent } from 'vue'
 
-// export default defineComponent({
-//   components: { CIcon },
-// })
-//
+export default defineComponent({
+  components: { CIcon },
+})
 </script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <c-icon color="red.400" size="10" name="phone" />
+  </div>
+</template>
+
+<script lang="ts">
+import { CIcon } from '@chakra-ui/c-icon/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CIcon },
+})
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <c-icon name="phone" />
+    <c-icon size="6" name="email" />
+    <c-icon size="10" name="sun" />
+    <c-icon size="14" name="moon" />
+  </div>
+</template>
+
+<script lang="ts">
+import { CIcon } from '@chakra-ui/c-icon/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CIcon },
+})
+</script>

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

@@ -1,6 +1,11 @@
-import { h, defineComponent, PropType } from 'vue'
-import { chakra, DOMElements } from '@chakra-ui/vue-system'
+import { h, defineComponent, PropType, computed } from 'vue'
+import {
+  chakra,
+  DOMElements,
+  StyleAndHTMLAttibutes,
+} from '@chakra-ui/vue-system'
 import { InternalIcon } from './icon.internals'
+import internalIcons from './icon.internals'
 
 const fallbackIcon: InternalIcon = {
   path: `
@@ -25,10 +30,29 @@ export const CIcon = defineComponent({
   props: {
     as: {
       type: [Object, String] as PropType<DOMElements>,
-      default: 'div',
+      default: 'svg',
+    },
+    name: {
+      type: [String] as PropType<string>,
+    },
+    size: {
+      type: [String] as PropType<string>,
+      default: '1em',
     },
   },
   setup(props, { slots, attrs }) {
-    return () => h(chakra(props.as), { ...attrs }, slots)
+    const vnodeProps = computed<StyleAndHTMLAttibutes>(() => ({
+      w: props.size,
+      h: props.size,
+      display: 'inline-block',
+      lineHeight: '1em',
+      flexShrink: 0,
+      color: 'currentColor',
+      innerHTML:
+        internalIcons[props?.name as string]?.path || fallbackIcon.path,
+      viewBox: fallbackIcon.viewBox,
+    }))
+
+    return () => h(chakra(props.as), { ...vnodeProps.value, ...attrs }, slots)
   },
 })

packages/c-icon/src/icon.ts

@@ -7,7 +7,7 @@ import {
 } from '@chakra-ui/styled-system'
 import { HTMLAttributes } from 'vue'
 
-type StyleAndHTMLAttibutes = StyleObjectOrFn &
+export type StyleAndHTMLAttibutes = StyleObjectOrFn &
   Record<string, string | number | boolean | unknown> &
   HTMLAttributes
 

packages/system/src/system.attrs.ts

@@ -6,15 +6,19 @@ import Component_5 from '@chakra-ui/c-alert/examples/with-status.vue'
 import Component_6 from '@chakra-ui/c-alert/examples/with-title.vue'
 import Component_7 from '@chakra-ui/c-button/examples/base-button.vue'
 import Component_8 from '@chakra-ui/c-icon/examples/base-icon.vue'
-import Component_9 from "../components/Home.vue";
+import Component_9 from '@chakra-ui/c-icon/examples/with-color.vue'
+import Component_10 from '@chakra-ui/c-icon/examples/with-size.vue'
+import Component_11 from "../components/Home.vue";
 
 export default {
-  "../components/Home.vue": Component_9,
+  "../components/Home.vue": Component_11,
   "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
   "@chakra-ui/c-alert/examples/fix-hover.vue": Component_3,
   "@chakra-ui/c-alert/examples/with-accent.vue": Component_4,
   "@chakra-ui/c-alert/examples/with-status.vue": Component_5,
   "@chakra-ui/c-alert/examples/with-title.vue": Component_6,
   "@chakra-ui/c-button/examples/base-button.vue": Component_7,
-  "@chakra-ui/c-icon/examples/base-icon.vue": Component_8
+  "@chakra-ui/c-icon/examples/base-icon.vue": Component_8,
+  "@chakra-ui/c-icon/examples/with-color.vue": Component_9,
+  "@chakra-ui/c-icon/examples/with-size.vue": Component_10
 }

playground/src/.generated/imports.js

@@ -54,6 +54,16 @@
         "name": "Base icon",
         "path": "/c-icon/base-icon",
         "component": "@chakra-ui/c-icon/examples/base-icon.vue"
+      },
+      {
+        "name": "With color",
+        "path": "/c-icon/with-color",
+        "component": "@chakra-ui/c-icon/examples/with-color.vue"
+      },
+      {
+        "name": "With size",
+        "path": "/c-icon/with-size",
+        "component": "@chakra-ui/c-icon/examples/with-size.vue"
       }
     ]
   },