feat(c-icon): create icon component

Author: codebender828

packages/c-icon/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-icon
+
+A component to display icons in the browser
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-icon
+# or
+npm i @chakra-ui/c-icon
+```

packages/c-icon/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@chakra-ui/c-icon",
+  "description": "Chakra UI Vue | A component to display icons in the browser component",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "author": "Jonathan Bakebwa <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/styled-system": "^1.4.1",
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
+  }
+}

packages/c-icon/src/index.ts

@@ -0,0 +1,13 @@
+import { h, defineComponent, PropType } from 'vue'
+
+export const CIcon = defineComponent({
+  props: {
+    as: {
+      type: Object as PropType<string>,
+      default: 'div',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return h(props?.as, { ...attrs }, slots.default?.())
+  },
+})

packages/c-icon/tests/c-icon.test.ts

@@ -0,0 +1,7 @@
+import { render } from '../../test-utils/src'
+import { CIcon } from '../src'
+
+it('should render properly', () => {
+  const { asFragment } = render(CIcon)
+  expect(asFragment()).toMatchSnapshot()
+})

packages/c-icon/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}