refactor: only use unocss icons (BewlyBewly#742)

Co-authored-by: hakadao <[email protected]>

package.json

@@ -52,7 +52,6 @@
     "@antfu/eslint-config": "^2.17.0",
     "@ffflorian/jszip-cli": "^3.6.3",
     "@iconify/json": "^2.2.208",
-    "@iconify/vue": "^4.1.2",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@types/dplayer": "^1.25.5",
@@ -82,8 +81,6 @@
     "typescript": "^5.4.5",
     "unocss": "0.59.4",
     "unplugin-auto-import": "^0.17.5",
-    "unplugin-icons": "^0.19.0",
-    "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.11",
     "vitest": "^1.6.0",
     "vue": "^3.4.27",

src/components/BackToTopAndRefreshButtons.vue

@@ -27,8 +27,11 @@ const emit = defineEmits(['refresh', 'back-to-top'])
       @click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
     >
       <Transition name="fade">
-        <line-md:rotate-270 v-if="showRefreshButton" text-lg shrink-0 rotate-90 absolute />
-        <line-md:arrow-small-up v-else text-lg shrink-0 absolute />
+        <div
+          v-if="showRefreshButton" i-line-md:rotate-270 text-lg shrink-0 rotate-90
+          absolute
+        />
+        <div v-else i-line-md:arrow-small-up text-lg shrink-0 absolute />
       </Transition>
     </Button>
   </div>

src/components/Dialog.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import { onKeyStroke } from '@vueuse/core'
 import Button from '~/components/Button.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
@@ -122,7 +121,7 @@ function handleConfirm() {
               pos="absolute top-0 left-0" w-full h-full bg="white dark:black opacity-60 dark:opacity-60" flex="~ justify-center items-center"
               z-2
             >
-              <Icon icon="svg-spinners:ring-resize" text="4xl" />
+              <div i-svg-spinners-ring-resize text="4xl" />
             </div>
           </Transition>
 
@@ -157,7 +156,7 @@ function handleConfirm() {
               hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
               @click="handleClose"
             >
-              <ic-baseline-clear />
+              <div i-ic-baseline-clear />
             </div>
           </header>
 

src/components/Dock/Dock.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
 import { AppPage } from '~/enums/appEnums'
@@ -113,13 +112,15 @@ function toggleDockHide(hide: boolean) {
             :class="{ active: activatedPage === dockItem.page }"
             @click="emit('change-page', dockItem.page)"
           >
-            <Icon
+            <div
               v-show="activatedPage !== dockItem.page"
-              :icon="dockItem.icon"
+              :class="dockItem.icon"
+              text-xl
             />
-            <Icon
+            <div
               v-show="activatedPage === dockItem.page"
-              :icon="dockItem.iconActivated"
+              :class="dockItem.iconActivated"
+              text-xl
             />
           </button>
         </Tooltip>
@@ -137,22 +138,22 @@ function toggleDockHide(hide: boolean) {
         >
           <Transition name="fade">
             <div v-show="hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-loop-transition v-if="isDark" />
-              <line-md:moon-alt-to-sunny-outline-loop-transition v-else />
+              <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
+              <div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
             </div>
           </Transition>
           <Transition name="fade">
             <div v-show="!hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-transition v-if="isDark" />
-              <line-md:moon-to-sunny-outline-transition v-else />
+              <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
+              <div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
             </div>
           </Transition>
         </button>
       </Tooltip>
 
       <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
         <button class="dock-item" @click="emit('settings-visibility-change')">
-          <mingcute:settings-3-line />
+          <div i-mingcute:settings-3-line text-xl />
         </button>
       </Tooltip>
     </div>

src/components/RightSideButtons/RightSideButtons.vue

@@ -30,14 +30,14 @@ const hoveringDockItem = reactive<HoveringDockItem>({
         >
           <Transition name="fade">
             <div v-show="hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-loop-transition v-if="isDark" />
-              <line-md:moon-alt-to-sunny-outline-loop-transition v-else />
+              <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
+              <div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
             </div>
           </Transition>
           <Transition name="fade">
             <div v-show="!hoveringDockItem.themeMode" absolute>
-              <line-md:sunny-outline-to-moon-transition v-if="isDark" />
-              <line-md:moon-to-sunny-outline-transition v-else />
+              <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
+              <div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
             </div>
           </Transition>
         </Button>
@@ -49,7 +49,9 @@ const hoveringDockItem = reactive<HoveringDockItem>({
           center size="small" round
           @click="emit('settings-visibility-change')"
         >
-          <mingcute:settings-3-line />
+          <div>
+            <div i-mingcute:settings-3-line text-xl />
+          </div>
         </Button>
       </Tooltip>
     </div>

src/components/SearchBar/SearchBar.vue

@@ -224,7 +224,7 @@ async function handleClearSearchHistory() {
         flex="~ items-center justify-between"
         @click="keyword = ''"
       >
-        <ic-baseline-clear shrink-0 />
+        <div i-ic-baseline-clear shrink-0 />
       </button>
 
       <button
@@ -240,7 +240,7 @@ async function handleClearSearchHistory() {
         style="--un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color))"
         @click="navigateToSearchResultPage(keyword)"
       >
-        <tabler:search block align-middle />
+        <div i-tabler:search block align-middle />
       </button>
     </div>
 
@@ -275,7 +275,7 @@ async function handleClearSearchHistory() {
                 pos="absolute top-0 right-0" scale-80 opacity-0 group-hover:opacity-100
                 @click.stop="handleDelete(item.value)"
               >
-                <ic-baseline-clear />
+                <div i-ic-baseline-clear />
               </button>
             </div>
           </div>

src/components/Settings/Settings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { Icon } from '@iconify/vue'
 import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 
 import type { MenuItem } from './types'
@@ -39,32 +38,32 @@ const settingsMenuItems = computed((): MenuItem[] => {
   return [
     {
       value: MenuType.General,
-      icon: 'mingcute:settings-3-line',
-      iconActivated: 'mingcute:settings-3-fill',
+      icon: 'i-mingcute:settings-3-line',
+      iconActivated: 'i-mingcute:settings-3-fill',
       title: t('settings.menu_general'),
     },
     {
       value: MenuType.Appearance,
       title: t('settings.menu_appearance'),
-      icon: 'mingcute:paint-brush-line',
-      iconActivated: 'mingcute:paint-brush-fill',
+      icon: 'i-mingcute:paint-brush-line',
+      iconActivated: 'i-mingcute:paint-brush-fill',
     },
     {
       value: MenuType.SearchPage,
-      icon: 'mingcute:search-2-line',
-      iconActivated: 'mingcute:search-2-fill',
+      icon: 'i-mingcute:search-2-line',
+      iconActivated: 'i-mingcute:search-2-fill',
       title: t('settings.menu_search_page'),
     },
     {
       value: MenuType.Home,
-      icon: 'mingcute:home-5-line',
-      iconActivated: 'mingcute:home-5-fill',
+      icon: 'i-mingcute:home-5-line',
+      iconActivated: 'i-mingcute:home-5-fill',
       title: t('settings.menu_home'),
     },
     {
       value: MenuType.Compatibility,
-      icon: 'mingcute:polygon-line',
-      iconActivated: 'mingcute:polygon-fill',
+      icon: 'i-mingcute:polygon-line',
+      iconActivated: 'i-mingcute:polygon-fill',
       title: t('settings.menu_compatibility'),
     },
     // {
@@ -75,8 +74,8 @@ const settingsMenuItems = computed((): MenuItem[] => {
     // },
     {
       value: MenuType.About,
-      icon: 'mingcute:information-line',
-      iconActivated: 'mingcute:information-fill',
+      icon: 'i-mingcute:information-line',
+      iconActivated: 'i-mingcute:information-fill',
       title: t('settings.menu_about'),
     },
   ]
@@ -152,15 +151,15 @@ function setCurrentTitle() {
               :class="{ 'menu-item-activated': menuItem.value === activatedMenuItem }"
               @click="changeMenuItem(menuItem.value)"
             >
-              <Icon
+              <div
                 v-show="menuItem.value !== activatedMenuItem"
                 text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
-                :icon="menuItem.icon"
+                :class="menuItem.icon"
               />
-              <Icon
+              <div
                 v-show="menuItem.value === activatedMenuItem"
                 text="xl center" w-40px h-20px flex="~ shrink-0" justify-center
-                :icon="menuItem.iconActivated"
+                :class="menuItem.iconActivated"
               />
               <span shrink-0>{{ menuItem.title }}</span>
             </a>
@@ -205,7 +204,7 @@ function setCurrentTitle() {
             hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
             @click="handleClose"
           >
-            <ic-baseline-clear />
+            <div i-ic-baseline-clear />
           </div>
         </header>
         <OverlayScrollbarsComponent