chatgpt-web-dev · BobDu · Jan 14, 2026 · Jan 14, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -25,6 +25,13 @@
 - ESLint is the source of truth; run `pnpm lint:fix` before commit.
 - Commit hooks are managed by Husky (`pnpm bootstrap`).
 
+## Icons (unplugin-icons)
+- Use `Icon*` components (e.g., `<IconRiDownload2Line />`) in templates; they are auto-imported.
+- In script/render functions, `Icon*` components are also auto-imported via `unplugin-auto-import`; avoid manual `~icons/...` imports.
+- If an icon name fails, switch to a valid icon in the same collection (e.g., `ri`), then rerun the app.
+- Loader note: `@iconify/utils` uses `searchForIcon()` with `getPossibleIconNames()`, so numeric names like `settings4-line` can resolve to `settings-4-line` at load time.
+- Rule: always use the `Icon*` component form (e.g., `<IconRiSettings4Line />`) for icons going forward.
+
 ## i18n Keys & Usage
 - Locale files live in `src/locales/` (`en-US.json`, `zh-CN.json`, `zh-TW.json`, `ko-KR.json`).
 - `en-US.json` is the canonical schema; add new keys there first, then mirror them in other locales.

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -7,6 +7,17 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue').EffectScope
+  const IconIcOutlineCode: typeof import('~icons/ic/outline-code').default
+  const IconIcOutlineCodeOff: typeof import('~icons/ic/outline-code-off').default
+  const IconMdiFormatVerticalAlignBottom: typeof import('~icons/mdi/format-vertical-align-bottom').default
+  const IconMdiFormatVerticalAlignTop: typeof import('~icons/mdi/format-vertical-align-top').default
+  const IconMdiReorderHorizontal: typeof import('~icons/mdi/reorder-horizontal').default
+  const IconRiContrastLine: typeof import('~icons/ri/contrast-line').default
+  const IconRiDeleteBinLine: typeof import('~icons/ri/delete-bin-line').default
+  const IconRiExternalLinkLine: typeof import('~icons/ri/external-link-line').default
+  const IconRiFileCopy2Line: typeof import('~icons/ri/file-copy2-line').default
+  const IconRiMoonFoggyLine: typeof import('~icons/ri/moon-foggy-line').default
+  const IconRiSunFoggyLine: typeof import('~icons/ri/sun-foggy-line').default
   const acceptHMRUpdate: typeof import('pinia').acceptHMRUpdate
   const computed: typeof import('vue').computed
   const createApp: typeof import('vue').createApp

diff --git a/components.d.ts b/components.d.ts
@@ -11,6 +11,51 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    IconIcOutlineChat: typeof import('~icons/ic/outline-chat')['default']
+    IconMageBoxUpload: typeof import('~icons/mage/box-upload')['default']
+    IconMdiFormatVerticalAlignBottom: typeof import('~icons/mdi/format-vertical-align-bottom')['default']
+    IconMdiFormatVerticalAlignTop: typeof import('~icons/mdi/format-vertical-align-top')['default']
+    IconMdiGift: typeof import('~icons/mdi/gift')['default']
+    IconMdiLightbulbOutline: typeof import('~icons/mdi/lightbulb-outline')['default']
+    IconMdiReorderHorizontal: typeof import('~icons/mdi/reorder-horizontal')['default']
+    IconMdiWeb: typeof import('~icons/mdi/web')['default']
+    IconRiAddFill: typeof import('~icons/ri/add-fill')['default']
+    IconRiAlignJustify: typeof import('~icons/ri/align-justify')['default']
+    IconRiAlignRight: typeof import('~icons/ri/align-right')['default']
+    IconRiArrowDownSLine: typeof import('~icons/ri/arrow-down-s-line')['default']
+    IconRiBarChartBoxLine: typeof import('~icons/ri/bar-chart-box-line')['default']
+    IconRiBubbleChartFill: typeof import('~icons/ri/bubble-chart-fill')['default']
+    IconRiChatDownloadLine: typeof import('~icons/ri/chat-download-line')['default']
+    IconRiChatHistoryLine: typeof import('~icons/ri/chat-history-line')['default']
+    IconRiChatQuoteLine: typeof import('~icons/ri/chat-quote-line')['default']
+    IconRiChatUploadLine: typeof import('~icons/ri/chat-upload-line')['default']
+    IconRiCloseCircleLine: typeof import('~icons/ri/close-circle-line')['default']
+    IconRiDeleteBack2Fill: typeof import('~icons/ri/delete-back2-fill')['default']
+    IconRiDeleteBinLine: typeof import('~icons/ri/delete-bin-line')['default']
+    IconRiDownload2Fill: typeof import('~icons/ri/download2-fill')['default']
+    IconRiDownload2Line: typeof import('~icons/ri/download2-line')['default']
+    IconRiDownloadLine: typeof import('~icons/ri/download-line')['default']
+    IconRiEditLine: typeof import('~icons/ri/edit-line')['default']
+    IconRiEqualizerLine: typeof import('~icons/ri/equalizer-line')['default']
+    IconRiFileUserLine: typeof import('~icons/ri/file-user-line')['default']
+    IconRiImageEditLine: typeof import('~icons/ri/image-edit-line')['default']
+    IconRiInboxLine: typeof import('~icons/ri/inbox-line')['default']
+    IconRiKey2Line: typeof import('~icons/ri/key2-line')['default']
+    IconRiLink: typeof import('~icons/ri/link')['default']
+    IconRiListSettingsLine: typeof import('~icons/ri/list-settings-line')['default']
+    IconRiMailLine: typeof import('~icons/ri/mail-line')['default']
+    IconRiMessage3Line: typeof import('~icons/ri/message3-line')['default']
+    IconRiMore2Fill: typeof import('~icons/ri/more2-fill')['default']
+    IconRiQuestionAnswerLine: typeof import('~icons/ri/question-answer-line')['default']
+    IconRiRestartLine: typeof import('~icons/ri/restart-line')['default']
+    IconRiSaveLine: typeof import('~icons/ri/save-line')['default']
+    IconRiSendPlaneFill: typeof import('~icons/ri/send-plane-fill')['default']
+    IconRiSettings4Line: typeof import('~icons/ri/settings4-line')['default']
+    IconRiSettingsLine: typeof import('~icons/ri/settings-line')['default']
+    IconRiStopCircleLine: typeof import('~icons/ri/stop-circle-line')['default']
+    IconRiUpload2Fill: typeof import('~icons/ri/upload2-fill')['default']
+    IconRiUser5Line: typeof import('~icons/ri/user5-line')['default']
+    IconUilExit: typeof import('~icons/uil/exit')['default']
     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@antfu/eslint-config": "^6.3.0",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@iconify/vue": "^5.0.0",
+    "@iconify/json": "^2.2.397",
     "@tailwindcss/vite": "^4.1.17",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.2",
@@ -56,6 +56,7 @@
     "tailwindcss": "^4.1.17",
     "typescript": "~5.9.3",
     "unplugin-auto-import": "^20.3.0",
+    "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^30.0.0",
     "vite": "^7.2.6",
     "vue": "^3.5.25",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
@@ -6,7 +6,6 @@ import { UserPrompt } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAuthStoreWithout, usePromptStore } from '@/store'
 import { rankBetween } from '@/utils/lexorank'
-import { SvgIcon } from '..'
 import PromptRecommend from '../../../assets/recommend.json'
 
 const props = defineProps<Props>()
@@ -477,7 +476,7 @@ function createColumns(): DataTableColumns<DataProps> {
                       draggingId.value = null
                     },
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:reorder-horizontal' }) },
+                  { default: () => h(IconMdiReorderHorizontal) },
                 ),
                 default: () => t('store.drag'),
               },
@@ -494,7 +493,7 @@ function createColumns(): DataTableColumns<DataProps> {
                     disabled,
                     onClick: () => moveToTop(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-top' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignTop) },
                 ),
                 default: () => t('store.moveTop'),
               },
@@ -511,7 +510,7 @@ function createColumns(): DataTableColumns<DataProps> {
                     disabled,
                     onClick: () => moveToBottom(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-bottom' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignBottom) },
                 ),
                 default: () => t('store.moveBottom'),
               },
@@ -768,7 +767,7 @@ async function handleGetUserPromptList() {
                           @dragstart="handleMobileDragStart($event, item)"
                           @dragend="handleMobileDragEnd"
                         >
-                          <SvgIcon icon="mdi:reorder-horizontal" />
+                          <IconMdiReorderHorizontal />
                         </NButton>
                       </template>
                       {{ t('store.drag') }}
@@ -781,7 +780,7 @@ async function handleGetUserPromptList() {
                           :disabled="ordering || isSearchActive"
                           @click="moveToTop(item)"
                         >
-                          <SvgIcon icon="mdi:format-vertical-align-top" />
+                          <IconMdiFormatVerticalAlignTop />
                         </NButton>
                       </template>
                       {{ t('store.moveTop') }}
@@ -794,7 +793,7 @@ async function handleGetUserPromptList() {
                           :disabled="ordering || isSearchActive"
                           @click="moveToBottom(item)"
                         >
-                          <SvgIcon icon="mdi:format-vertical-align-bottom" />
+                          <IconMdiFormatVerticalAlignBottom />
                         </NButton>
                       </template>
                       {{ t('store.moveBottom') }}
@@ -848,11 +847,11 @@ async function handleGetUserPromptList() {
                       :href="info.url"
                       target="_blank"
                     >
-                      <SvgIcon class="text-xl" icon="ri:link" />
+                      <IconRiLink class="text-xl" />
                     </a>
                   </NButton>
                   <NButton text @click="setDownloadURL(info.downloadUrl) ">
-                    <SvgIcon class="text-xl" icon="ri:add-fill" />
+                    <IconRiAddFill class="text-xl" />
                   </NButton>
                 </div>
               </template>

diff --git a/src/components/common/Setting/BuiltInPrompt.vue b/src/components/common/Setting/BuiltInPrompt.vue
@@ -5,7 +5,6 @@ import { fetchBuiltInPromptList, fetchDeleteBuiltInPrompt, fetchUpsertBuiltInPro
 import { BuiltInPrompt } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { rankBetween } from '@/utils/lexorank'
-import { SvgIcon } from '..'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -236,7 +235,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                       draggingId.value = null
                     },
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:reorder-horizontal' }) },
+                  { default: () => h(IconMdiReorderHorizontal) },
                 ),
                 default: () => t('store.drag'),
               },
@@ -253,7 +252,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                     disabled,
                     onClick: () => moveToTop(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-top' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignTop) },
                 ),
                 default: () => t('store.moveTop'),
               },
@@ -270,7 +269,7 @@ function createColumns(): DataTableColumns<BuiltInPrompt> {
                     disabled,
                     onClick: () => moveToBottom(row),
                   },
-                  { default: () => h(SvgIcon, { icon: 'mdi:format-vertical-align-bottom' }) },
+                  { default: () => h(IconMdiFormatVerticalAlignBottom) },
                 ),
                 default: () => t('store.moveBottom'),
               },

diff --git a/src/components/common/Setting/ChatRecord.vue b/src/components/common/Setting/ChatRecord.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { NButton } from 'naive-ui'
 import { fetchGetChatHistory, fetchGetChatRoomsCount, fetchGetUsers } from '@/api'
-import { SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import Message from '@/views/chat/components/Message/index.vue'
 
@@ -168,7 +167,7 @@ onMounted(async () => {
       <NSpin :show="chatLoading">
         <template v-if="!dataSources.length">
           <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+            <IconRiBubbleChartFill class="mr-2 text-3xl" />
             <span>Aha~</span>
           </div>
         </template>