refactor: use material-icons to svg js

package-lock.json

@@ -16,7 +16,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.24.0",
-        "@mdi/font": "^7.4.47",
+        "@mdi/js": "^7.4.47",
         "@playwright/test": "^1.52.0",
         "@typescript-eslint/eslint-plugin": "^8.30.1",
         "@typescript-eslint/parser": "^8.30.1",
@@ -1983,10 +1983,10 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/@mdi/font": {
+    "node_modules/@mdi/js": {
       "version": "7.4.47",
-      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
-      "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
       "dev": true,
       "license": "Apache-2.0"
     },

package.json

@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
-    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
     "@playwright/test": "^1.52.0",
     "@typescript-eslint/eslint-plugin": "^8.30.1",
     "@typescript-eslint/parser": "^8.30.1",

src/renderer/components/layout/HeaderLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="tsx">
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { mdiFitToScreenOutline, mdiHome } from '@mdi/js'
 
 const router = useRouter()
 const route: any = useRoute()
@@ -21,7 +22,7 @@ const isCurrentRoute = (path: string): boolean => {
     <v-app-bar-title>{{ t(titleKey) }}</v-app-bar-title>
     <template #append>
       <v-btn
-        prepend-icon="mdi-home"
+        :prepend-icon="mdiHome"
         variant="text"
         :class="{ active: isCurrentRoute('/') }"
         @click="handleRoute('/')"
@@ -29,7 +30,7 @@ const isCurrentRoute = (path: string): boolean => {
         {{ t('title.main') }}
       </v-btn>
       <v-btn
-        prepend-icon="mdi-fit-to-screen-outline"
+        :prepend-icon="mdiFitToScreenOutline"
         variant="text"
         :class="{ active: isCurrentRoute('/second') }"
         @click="handleRoute('/second')"

src/renderer/plugins/vuetify.ts

@@ -1,8 +1,7 @@
 import { createVuetify } from 'vuetify'
 import { ko, en, zhHans, zhHant, de, es, ja, fr, ru, pt, nl } from 'vuetify/locale'
-import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import 'vuetify/styles'
-import '@mdi/font/css/materialdesignicons.min.css'
 
 import colors from 'vuetify/util/colors'
 

src/renderer/screens/MainScreen.vue

@@ -5,6 +5,7 @@ import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
+import { mdiBrightness6, mdiFileDocument, mdiFolderOpen, mdiGithub, mdiPlusCircle } from '@mdi/js'
 
 const { t, locale, availableLocales } = useI18n()
 const { counterIncrease } = useCounterStore()
@@ -81,7 +82,7 @@ const handleOpenFile = async () => {
         <v-row class="my-4">
           <v-col>
             <v-btn icon color="primary" @click="handleChangeTheme">
-              <v-icon icon="mdi-brightness-6" />
+              <v-icon :icon="mdiBrightness6" />
               <v-tooltip activator="parent" location="bottom">
                 {{ t('menu.change-theme') }}
               </v-tooltip>
@@ -90,7 +91,7 @@ const handleOpenFile = async () => {
           <v-col>
             <v-badge data-testid="counter-badge" color="blue" :content="counter">
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
-                <v-icon icon="mdi-plus-circle" />
+                <v-icon :icon="mdiPlusCircle" />
                 <v-tooltip activator="parent" location="bottom">
                   {{ t('menu.increase-count') }}
                 </v-tooltip>
@@ -99,7 +100,7 @@ const handleOpenFile = async () => {
           </v-col>
           <v-col>
             <v-btn icon color="primary" @click="handleOpenDocument">
-              <v-icon icon="mdi-file-document" />
+              <v-icon :icon="mdiFileDocument" />
               <v-tooltip activator="parent" location="bottom">
                 {{ t('menu.documentation') }}
               </v-tooltip>
@@ -107,7 +108,7 @@ const handleOpenFile = async () => {
           </v-col>
           <v-col>
             <v-btn icon color="primary" @click="handleOpenGitHub">
-              <v-icon icon="mdi-github" />
+              <v-icon :icon="mdiGithub" />
               <v-tooltip activator="parent" location="bottom">
                 {{ t('menu.github') }}
               </v-tooltip>
@@ -115,7 +116,7 @@ const handleOpenFile = async () => {
           </v-col>
           <v-col>
             <v-btn icon color="primary" @click="handleOpenFile">
-              <v-icon icon="mdi-folder-open" />
+              <v-icon :icon="mdiFolderOpen" />
               <v-tooltip activator="parent" location="bottom">
                 {{ t('menu.open-file') }}
               </v-tooltip>

src/renderer/screens/SecondScreen.vue

@@ -1,5 +1,6 @@
 <script setup lang="tsx">
 import { useI18n } from 'vue-i18n'
+import { mdiEmoticonCoolOutline } from '@mdi/js'
 
 const { t } = useI18n()
 </script>
@@ -8,7 +9,7 @@ const { t } = useI18n()
   <v-container>
     <v-row no-gutters align="center" class="text-center">
       <v-col cols="12">
-        <v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
+        <v-icon :icon="mdiEmoticonCoolOutline" size="250" color="#009f57" />
       </v-col>
       <v-col cols="12" class="my-4">{{ t('desc.second-desc') }}</v-col>
     </v-row>