feat(Icon): new Icon component

packages/icon/README.md

@@ -0,0 +1,41 @@
+# GITS Icon Component
+
+## Installation
+
+npm
+
+```
+npm i @gits-id/icon
+```
+
+yarn
+
+```
+yarn add @gits-id/icon
+```
+
+pnpm
+
+```
+pnpm i @gits-id/icon
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {Icon} from '@gits-id/icon';
+</script>
+
+<template>
+  <Icon icon="ic:add" />
+</template>
+```
+
+## Documentation
+
+View full documentation [here](https://gits-ui.web.app/?path=/story/components-icon--default).
+
+## License
+
+MIT

packages/icon/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@gits-id/icon",
+  "version": "0.10.12",
+  "description": "GITS Icon Component",
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "prepublishOnly": "npm run build",
+    "test": "vitest"
+  },
+  "keywords": [
+    "gits",
+    "icon",
+    "iconify"
+  ],
+  "author": "Warsono <[email protected]>",
+  "license": "ISC",
+  "dependencies": {
+    "vue": "^3.2.31"
+  },
+  "devDependencies": {
+    "vite": "^2.9.9",
+    "vitest": "^0.12.4",
+    "vue-tsc": "^0.40.1"
+  },
+  "main": "dist/icon.js",
+  "unpkg": "dist/icon.iife.js",
+  "jsdelivr": "dist/icon.iife.js",
+  "module": "./dist/icon.mjs",
+  "types": "./dist/types/index.d.ts",
+  "gitHead": "262e63ff9c3301948641b84ae8aeb76f2bf87463"
+}

packages/icon/src/Icon.spec.ts

@@ -0,0 +1,17 @@
+import {mount} from '@vue/test-utils';
+import {describe, expect, test} from 'vitest';
+import Icon from './Icon.vue';
+
+describe('Icon', () => {
+  test('mount component', () => {
+    expect(Icon).toBeTruthy();
+
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'ic:round-home',
+      },
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+});

packages/icon/src/Icon.stories.ts

@@ -0,0 +1,39 @@
+import {Story} from '@storybook/vue3';
+import Icon from './Icon.vue';
+
+export default {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {},
+  args: {
+    name: 'ic:round-home',
+  },
+};
+
+export const Default: Story<{}> = (args) => ({
+  components: {Icon},
+  setup() {
+    return {args};
+  },
+  template: `<Icon v-bind="args" />`,
+});
+Default.storyName = 'Icon';
+Default.parameters = {
+  docs: {
+    source: {
+      code: '<Icon name="ic:round-home" />',
+    },
+  },
+};
+
+export const CustomClass = Default.bind({});
+CustomClass.args = {
+  class: 'w-10 h-10',
+};
+CustomClass.parameters = {
+  docs: {
+    source: {
+      code: '<Icon name="ic:round-home" class="w-10 h-10" />',
+    },
+  },
+};

packages/icon/src/Icon.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {Icon as Iconify} from '@iconify/vue/dist/offline';
+import {loadIcon} from '@iconify/vue';
+import {ref, watch} from 'vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const isFetching = ref(false);
+const icon = ref();
+
+async function loadIconComponent() {
+  isFetching.value = true;
+  icon.value = await loadIcon(props.name).catch(() => {});
+  isFetching.value = false;
+}
+
+watch(() => props.name, loadIconComponent);
+
+loadIconComponent();
+</script>
+
+<template>
+  <span v-if="isFetching" class="inline-block w-5 h-5" />
+  <Iconify v-else-if="icon" :icon="icon" class="inline-block w-5 h-5" />
+  <span v-else>{{ name }}</span>
+</template>

packages/icon/src/index.ts

@@ -0,0 +1 @@
+export {default as Icon} from './Icon.vue';

packages/icon/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "declaration": true,
+    "sourceMap": false,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "rootDir": ".",
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/vue.d.ts", "*.vue", "src"],
+  "exclude": ["**/*.stories.ts", "**/*.spec.ts", "**/*.test.ts"]
+}

packages/icon/vite.config.js

@@ -0,0 +1,34 @@
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import {resolve} from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  esbuild: {
+    exclude: ['./src/**/**.stories.ts'],
+  },
+  build: {
+    target: 'esnext',
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'VIcon',
+      formats: ['es', 'cjs', 'iife', 'umd'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', '@iconify/vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+      resolve: {
+        dedupe: 'vue',
+      },
+    },
+  },
+});