patch: replaces unplugin-icons with @mdi/js (v0.22.14)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssasy-auth/extension",
   "nickname": "ssasy",
-  "version": "0.22.13",
+  "version": "0.22.14",
   "license": "MIT",
   "description": "a browser extension that is built with a secure, usable and scalable authentictaion scheme",
   "repository": "this-oliver/ssasy-ext",
@@ -37,6 +37,7 @@
     "test": "vitest test"
   },
   "dependencies": {
+    "@mdi/js": "^7.2.96",
     "@ssasy-auth/core": "1.9.1",
     "pinia": "^2.0.33",
     "vue": "^3.2.47",
@@ -46,7 +47,6 @@
   },
   "devDependencies": {
     "@ffflorian/jszip-cli": "^3.1.9",
-    "@iconify/json": "^2.2.31",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.14.6",
     "@types/webextension-polyfill": "^0.10.0",
@@ -75,7 +75,6 @@
     "typescript": "^4.9.5",
     "unocss": "^0.50.4",
     "unplugin-auto-import": "^0.15.1",
-    "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.24.0",
     "vite": "^4.1.4",
     "vite-plugin-pages": "^0.28.0",

src/components/AppBar.vue

@@ -53,7 +53,7 @@ function goBack() {
       small
       rounded="pill"
       @click="goBack">
-      <material-symbols-arrow-back />
+      <v-icon icon="$mdi-arrow-left" />
     </base-btn>
 
     <logo id="bar-center"/>

src/components/README.md

@@ -3,9 +3,3 @@
 Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
 
 Components can be shared in all views.
-
-### Icons
-
-You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
-
-It will only bundle the icons you use. Check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.

src/components/cards/InfoCard.vue

@@ -18,7 +18,7 @@ const props = defineProps({
       <v-col cols="1">
         <div class="mx-auto">
           <slot name="icon">
-            <mdi-information-outline />
+            <v-icon icon="$mdi-information-outline" />
           </slot>
         </div>
       </v-col>

src/pages/Home.vue

@@ -6,38 +6,44 @@ import BaseBtn from '~/components/base/BaseBtn.vue';
 const options: ActionItem[] = [
   {
     label: 'Key',
-    to: '/key'
+    to: '/key',
+    icon: '$mdi-key'
   },
   {
     label: 'Settings',
-    to: '/settings'
+    to: '/settings',
+    icon: '$mdi-cog'
   }
 ];
+
 </script>
 
 <template>
   <base-page title="Home">
     <v-row justify="center">
-      <v-col
-        cols="11"
-        md="6"
-        class="home-welcome text-center">
-        <h1>🎉 Welcome!</h1>
-      </v-col>
-
-      <v-divider class="opacity-0" />
-
       <v-col
         v-for="option in options"
         :key="option.label"
         cols="7"
         md="4"
         class="mt-1">
         <base-btn
-          large
           block
+          extra-large
           :to="option.to">
-          {{ option.label }}
+          <v-row
+            justify="space-between"
+            style="width: 100%;">
+            <v-col>
+              {{ option.label }}
+            </v-col>
+
+            <v-col>
+              <v-icon
+                v-if="option.icon"
+                :icon="option.icon"/>
+            </v-col>
+          </v-row>
         </base-btn>
       </v-col>
     </v-row>

src/plugins/vuetify-plugin.ts

@@ -4,7 +4,9 @@ import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import { VSkeletonLoader } from 'vuetify/labs/VSkeletonLoader'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
-import { type ThemeDefinition } from 'vuetify'
+import * as icons from '@mdi/js'
+
+import type { ThemeDefinition } from 'vuetify'
 
 export const AppTheme: ThemeDefinition = {
   dark: false,
@@ -46,6 +48,18 @@ export const AppThemeDark: ThemeDefinition = {
   }
 }
 
+function getProcessedIcons(icons: any){
+  const processedIcons: any = {};
+
+  for (const key in icons) {
+    // convert from PascalCase to kebab-case
+    const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+
+    processedIcons[kebabCaseKey] = icons[key]
+  }
+
+  return processedIcons
+}
 
 export default createVuetify({
   components: {
@@ -62,7 +76,10 @@ export default createVuetify({
   },
   icons: {
     defaultSet: 'mdi',
-    aliases,
+    aliases: {
+      ...aliases,
+      ...getProcessedIcons(icons)
+    },
     sets: {
       mdi
     }

vite.config.ts

@@ -6,8 +6,6 @@ import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
-import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import UnoCSS from 'unocss/vite'
@@ -44,18 +42,9 @@ export const sharedConfig: UserConfig = {
     Components({
       dirs: [ r('src/components') ],
       // generate `components.d.ts` for ts support with Volar
-      dts: r('src/components.d.ts'),
-      resolvers: [
-        // auto import icons
-        IconsResolver({
-          componentPrefix: ''
-        })
-      ]
+      dts: r('src/components.d.ts')
     }),
 
-    // https://github.com/antfu/unplugin-icons
-    Icons(),
-
     // https://github.com/unocss/unocss
     UnoCSS(),