feat: iconify

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'no-unused-expressions': 'off',
     'no-useless-escape': 'off',
+    'import/no-absolute-path': 'off',
 
     // typescript
     '@typescript-eslint/ban-types': 'off',

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
+    "@iconify/json": "^1.1.314",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "@vitejs/plugin-vue": "^1.1.5",
@@ -75,6 +76,7 @@
     "tailwindcss": "^2.0.3",
     "typescript": "^4.2.3",
     "vite": "^2.0.5",
+    "vite-plugin-icons": "^0.3.2",
     "vue": "^3.0.7",
     "vue-eslint-parser": "^7.6.0",
     "vue-router": "4",

src/modules/Home/views/home.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>Bismillah, Hello Vue</div>
+  <div>
+    Bismillah, Hello Vue
+    <IconAccessibility />
+  </div>
 </template>
 
 <script lang="ts">
@@ -11,8 +14,15 @@ import { useStore } from 'vuex'
 
 import { SET_TITLE } from '@/stores/Common/commonTypes'
 
+import IconAccessibility from '/@vite-icons/cil/globe-alt'
+
 export default defineComponent({
   name: 'Home',
+
+  components: {
+    IconAccessibility
+  },
+
   setup () {
     const store = useStore()
     const common = store.getters.common

vite.config.ts

@@ -1,9 +1,13 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import path from 'path'
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import ViteIcons from 'vite-plugin-icons'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    Vue(),
+    ViteIcons(),
+  ],
 
   resolve: {
     alias: [