refactor(web): icons

packages/web/package.json

@@ -9,8 +9,6 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@jamescoyle/vue-icon": "^0.1.2",
-    "@mdi/js": "^7.4.47",
     "@memoh/shared": "workspace:*",
     "@memoh/ui": "workspace:*",
     "@pinia/colada": "^0.21.1",
@@ -36,7 +34,12 @@
     "vue-i18n": "^11.2.8",
     "vue-router": "^4.6.4",
     "vue-sonner": "^2.0.9",
-    "zod": "^4.3.5"
+    "zod": "^4.3.5",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/vue-fontawesome": "^3.1.1"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",

packages/web/src/components/Sidebar/index.vue

@@ -4,12 +4,16 @@
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <img
-              src="../../../public/logo.png"
-              width="80"
-              class="m-auto"
-              alt="logo.png"
-            >
+            <div class="flex flex-row items-center w-full gap-2 px-3 py-2">
+              <img
+                src="/logo.png"
+                class="size-10"
+                alt="logo.png"
+              >
+              <span class="text-xl font-bold text-gray-500 dark:text-gray-400">
+                Memoh
+              </span>
+            </div>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
@@ -36,10 +40,7 @@
                     }"
                     @click="router.push({ name: sidebarItem.name })"
                   >
-                    <svg-icon
-                      type="mdi"
-                      :path="sidebarItem.icon"
-                    />
+                    <FontAwesomeIcon :icon="sidebarItem.icon" />
                     <span>{{ sidebarItem.title }}</span>
                   </Toggle>
                 </SidebarMenuButton>
@@ -65,8 +66,6 @@ import {
   Toggle
 } from '@memoh/ui'
 import { computed } from 'vue'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiRobot, mdiChatOutline, mdiCogBox } from '@mdi/js'
 import { useRouter,useRoute } from 'vue-router'
 import { useUserStore } from '@/store/user'
 import i18n from '@/i18n'
@@ -85,7 +84,7 @@ const sidebarInfo = computed(() => [
   {
     title: t('slidebar.chat'),
     name: 'chat',
-    icon: mdiChatOutline
+    icon: ['far', 'comments']
   },
   // {
   //   title: t('slidebar.home'),
@@ -95,11 +94,11 @@ const sidebarInfo = computed(() => [
   {
     title: t('slidebar.model_setting'),
     name: 'models',
-    icon: mdiRobot
+    icon: ['fas', 'robot']
   }, {
     title: t('slidebar.setting'),
     name: 'settings',
-    icon: mdiCogBox
+    icon: ['fas', 'gear']
   },
   // {
   //   title: 'MCP',

packages/web/src/components/add-provider/index.vue

@@ -6,9 +6,8 @@
           class="w-full shadow-none! text-muted-foreground mb-4"
           variant="outline"
         >
-          <svg-icon
-            type="mdi"
-            :path="mdiPlus"
+          <FontAwesomeIcon
+            :icon="['fas', 'plus']"
             class="mr-1"
           /> 添加
         </Button>
@@ -127,8 +126,6 @@
   </section>
 </template>
 <script setup lang="ts">
-import { mdiPlus } from '@mdi/js'
-import SvgIcon from '@jamescoyle/vue-icon'
 import {
   Button,
   Dialog,

packages/web/src/components/chat-list/robot-chat/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="flex gap-4 items-start">
     <div class="p-2 rounded-full bg-[#F9F9F9] dark:bg-[#666]">
-      <svg-icon
-        type="mdi"
-        :path="mdiRobotOutline"
-      />
+      <FontAwesomeIcon :icon="['fas', 'robot']" />
     </div>
     <section class="w-[90%]">
       <sup class="font-semibold">
@@ -23,8 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiRobotOutline } from '@mdi/js'
 import type { robot } from '@memoh/shared'
 import MarkdownRender, { enableKatex, enableMermaid } from 'markstream-vue'
 import LoadingDots from '@/components/loading-dots/index.vue'

packages/web/src/components/loading-dots/index.vue

@@ -1,63 +1,15 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :width="size"
-    :height="size"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      cx="4"
-      cy="12"
-      r="3"
-      fill="currentColor"
-    >
-      <animate
-        id="dot1"
-        fill="freeze"
-        attributeName="opacity"
-        begin="0;dot3.end-0.25s"
-        dur="0.75s"
-        values="1;0.2"
-      />
-    </circle>
-    <circle
-      cx="12"
-      cy="12"
-      r="3"
-      fill="currentColor"
-      opacity="0.4"
-    >
-      <animate
-        fill="freeze"
-        attributeName="opacity"
-        begin="dot1.begin+0.15s"
-        dur="0.75s"
-        values="1;0.2"
-      />
-    </circle>
-    <circle
-      cx="20"
-      cy="12"
-      r="3"
-      fill="currentColor"
-      opacity="0.3"
-    >
-      <animate
-        id="dot3"
-        fill="freeze"
-        attributeName="opacity"
-        begin="dot1.begin+0.3s"
-        dur="0.75s"
-        values="1;0.2"
-      />
-    </circle>
-  </svg>
+  <FontAwesomeIcon
+    :icon="['fas', 'spinner']"
+    spin
+    :style="{ fontSize: `${size}px` }"
+  />
 </template>
 
 <script setup lang="ts">
 withDefaults(defineProps<{
   size?: number
 }>(), {
-  size: 24,
+  size: 16,
 })
 </script>

packages/web/src/main.ts

@@ -9,9 +9,39 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import 'markstream-vue/index.css'
 import 'katex/dist/katex.min.css'
 
+// Font Awesome
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faGear,
+  faPaperPlane,
+  faRobot,
+  faMagnifyingGlass,
+  faPlus,
+  faSpinner,
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faRectangleList,
+  faTrashCan,
+  faComments,
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faGear,
+  faPaperPlane,
+  faRobot,
+  faMagnifyingGlass,
+  faPlus,
+  faSpinner,
+  faRectangleList,
+  faTrashCan,
+  faComments,
+)
+
 createApp(App)
+  .component('FontAwesomeIcon', FontAwesomeIcon)
   .use(createPinia().use(piniaPluginPersistedstate))
   .use(PiniaColada)
   .use(router)
   .use(i18n)
-  .mount('#app')
+  .mount('#app')

packages/web/src/pages/chat/index.vue

@@ -32,10 +32,7 @@
         >
           <template v-if="!loading">
             {{ $t('chat.send') }}
-            <svg-icon
-              type="mdi"
-              :path="mdiSendOutline"
-            />
+            <FontAwesomeIcon :icon="['fas', 'paper-plane']" />
           </template>
           <LoadingDots v-else />
         </Button>
@@ -50,8 +47,6 @@ import {
   Textarea,
   Button,
 } from '@memoh/ui'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiSendOutline } from '@mdi/js'
 import ChatList from '@/components/chat-list/index.vue'
 import LoadingDots from '@/components/loading-dots/index.vue'
 import { provide, ref } from 'vue'

packages/web/src/pages/models/components/model-item.vue

@@ -42,10 +42,7 @@
         class="cursor-pointer"
         @click="$emit('edit', model)"
       >
-        <svg-icon
-          type="mdi"
-          :path="mdiCog"
-        />
+        <FontAwesomeIcon :icon="['fas', 'gear']" />
       </Button>
 
       <ConfirmPopover
@@ -55,10 +52,7 @@
       >
         <template #trigger>
           <Button variant="outline">
-            <svg-icon
-              type="mdi"
-              :path="mdiTrashCanOutline"
-            />
+            <FontAwesomeIcon :icon="['far', 'trash-can']" />
           </Button>
         </template>
       </ConfirmPopover>
@@ -83,8 +77,6 @@ import {
   SelectItem,
 } from '@memoh/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiCog, mdiTrashCanOutline } from '@mdi/js'
 import { type ModelInfo } from '@memoh/shared'
 
 defineProps<{

packages/web/src/pages/models/components/model-list.vue

@@ -31,10 +31,7 @@
     >
       <EmptyHeader>
         <EmptyMedia variant="icon">
-          <svg-icon
-            type="mdi"
-            :path="mdiListBoxOutline"
-          />
+          <FontAwesomeIcon :icon="['far', 'rectangle-list']" />
         </EmptyMedia>
       </EmptyHeader>
       <EmptyTitle>还没有添加模型</EmptyTitle>
@@ -55,8 +52,6 @@ import {
 } from '@memoh/ui'
 import CreateModel from '@/components/create-model/index.vue'
 import ModelItem from './model-item.vue'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiListBoxOutline } from '@mdi/js'
 import { type ModelInfo } from '@memoh/shared'
 
 defineProps<{

packages/web/src/pages/models/components/provider-form.vue

@@ -70,10 +70,7 @@
       >
         <template #trigger>
           <Button variant="outline">
-            <svg-icon
-              type="mdi"
-              :path="mdiTrashCanOutline"
-            />
+            <FontAwesomeIcon :icon="['far', 'trash-can']" />
           </Button>
         </template>
       </ConfirmPopover>
@@ -99,8 +96,6 @@ import {
   Spinner,
 } from '@memoh/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiTrashCanOutline } from '@mdi/js'
 import { computed, toValue, watch } from 'vue'
 import { toTypedSchema } from '@vee-validate/zod'
 import z from 'zod'

packages/web/src/pages/models/index.vue

@@ -28,9 +28,6 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '@memoh/ui'
-import { mdiMagnify,mdiListBoxOutline } from '@mdi/js'
-// import DataTable from '@/components/DataTable/index.vue'
-import SvgIcon from '@jamescoyle/vue-icon'
 import request from '@/utils/request'
 import { type ProviderInfo } from '@memoh/shared'
 import AddProvider from '@/components/add-provider/index.vue'
@@ -118,11 +115,7 @@ const openStatus = reactive({
                   searchProviderTxt.value = searchProviderTxt.temp_value
                 }"
               >
-                <svg-icon
-                  type="mdi"
-                  :path="mdiMagnify"
-                  class="translate-icon"
-                />
+                <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
               </InputGroupAddon>
             </InputGroup>
           </SidebarHeader>
@@ -184,10 +177,7 @@ const openStatus = reactive({
           >
             <EmptyHeader>
               <EmptyMedia variant="icon">
-                <svg-icon
-                  type="mdi"
-                  :path="mdiListBoxOutline"
-                />
+                <FontAwesomeIcon :icon="['far', 'rectangle-list']" />
               </EmptyMedia>
             </EmptyHeader>
             <EmptyTitle>No Provider</EmptyTitle>

packages/web/src/pages/settings/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="max-w-187 m-auto">
     <h6 class="mt-6 mb-2 flex items-center">
-      <svg-icon
-        type="mdi"
-        :path="mdiCog"
+      <FontAwesomeIcon
+        :icon="['fas', 'gear']"
         class="mr-2"
       />
       显示设置
@@ -103,8 +102,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@memoh/ui'
-import SvgIcon from '@jamescoyle/vue-icon'
-import { mdiCog } from '@mdi/js'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '../../store/user'

pnpm-lock.yaml

@@ -236,6 +236,21 @@ importers:
 
   packages/web:
     dependencies:
+      '@fortawesome/fontawesome-svg-core':
+        specifier: ^7.0.0
+        version: 7.1.0
+      '@fortawesome/free-brands-svg-icons':
+        specifier: ^7.0.0
+        version: 7.1.0
+      '@fortawesome/free-regular-svg-icons':
+        specifier: ^7.0.0
+        version: 7.1.0
+      '@fortawesome/free-solid-svg-icons':
+        specifier: ^7.0.0
+        version: 7.1.0
+      '@fortawesome/vue-fontawesome':
+        specifier: ^3.1.1
+        version: 3.1.3(@fortawesome/fontawesome-svg-core@7.1.0)(vue@3.5.26(typescript@5.9.3))
       '@jamescoyle/vue-icon':
         specifier: ^0.1.2
         version: 0.1.2
@@ -1364,6 +1379,32 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@fortawesome/fontawesome-common-types@7.1.0':
+    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-brands-svg-icons@7.1.0':
+    resolution: {integrity: sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-regular-svg-icons@7.1.0':
+    resolution: {integrity: sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/vue-fontawesome@3.1.3':
+    resolution: {integrity: sha512-OHHUTLPEzdwP8kcYIzhioUdUOjZ4zzmi+midwa4bqscza4OJCOvTKJEHkXNz8PgZ23kWci1HkKVX0bm8f9t9gQ==}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6 || ~7
+      vue: '>= 3.0.0 < 4'
+
   '@hono/node-server@1.19.9':
     resolution: {integrity: sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==}
     engines: {node: '>=18.14.1'}
@@ -5702,6 +5743,29 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@fortawesome/fontawesome-common-types@7.1.0': {}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/free-brands-svg-icons@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/free-regular-svg-icons@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/vue-fontawesome@3.1.3(@fortawesome/fontawesome-svg-core@7.1.0)(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 7.1.0
+      vue: 3.5.26(typescript@5.9.3)
+
   '@hono/node-server@1.19.9(hono@4.11.4)':
     dependencies:
       hono: 4.11.4