feat(icon): add examples

Author: codebender828

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

@@ -5,7 +5,7 @@ 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 CIcon = defineComponent({
+export const <%= h.changeCase.pascalCase(name) %> = defineComponent({
   props: {
     as: {
       type: [Object, String] as PropType<DOMElements>,

_templates/generator/component/examples.vue.ejs.t

@@ -0,0 +1,17 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.paramCase(name)%>.vue
+---
+
+<template>
+  <<%=h.changeCase.pascalCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> <<%=h.changeCase.pascalCase(name)%>>
+</template>
+
+<script lang="ts">
+import { <%=h.changeCase.pascalCase(name)%> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Base<%= h.changeCase.pascalCase(name) %>Example',
+  components: { <%= h.changeCase.pascalCase(name) %> },
+})
+</script>

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

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

packages/c-icon/src/internal.icons.ts

@@ -4,13 +4,15 @@ const Component_3 = () => import('@chakra-ui/c-alert/examples/with-accent.vue')
 const Component_4 = () => import('@chakra-ui/c-alert/examples/with-status.vue')
 const Component_5 = () => import('@chakra-ui/c-alert/examples/with-title.vue')
 const Component_6 = () => import('@chakra-ui/c-button/examples/base-button.vue')
-import Component_7 from "../components/Home.vue";
+const Component_7 = () => import('@chakra-ui/c-icon/examples/base-icon.vue')
+import Component_8 from "../components/Home.vue";
 
 export default {
-  "../components/Home.vue": Component_7,
+  "../components/Home.vue": Component_8,
   "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
   "@chakra-ui/c-alert/examples/with-accent.vue": Component_3,
   "@chakra-ui/c-alert/examples/with-status.vue": Component_4,
   "@chakra-ui/c-alert/examples/with-title.vue": Component_5,
-  "@chakra-ui/c-button/examples/base-button.vue": Component_6
+  "@chakra-ui/c-button/examples/base-button.vue": Component_6,
+  "@chakra-ui/c-icon/examples/base-icon.vue": Component_7
 }

playground/src/.generated/imports.js

@@ -41,6 +41,17 @@
       }
     ]
   },
+  {
+    "name": "Icon",
+    "path": "/c-icon",
+    "children": [
+      {
+        "name": "Base icon",
+        "path": "/c-icon/base-icon",
+        "component": "@chakra-ui/c-icon/examples/base-icon.vue"
+      }
+    ]
+  },
   {
     "name": "NotFound",
     "path": "/*",