refactor: use UIcon replace span icon

cuixueshe · Aug 12, 2024 · 4ec09e1 · 4ec09e1
1 parent fe785eb
commit 4ec09e1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/apps/client/components/main/StudyVideoLink.vue b/apps/client/components/main/StudyVideoLink.vue
@@ -7,7 +7,10 @@
     :data-tippy-content="NOTE_TIP"
     @mouseenter="$lazyTippy"
   >
-    <span class="i-simple-icons-bilibili h-6 w-6 opacity-85"></span>
+    <UIcon
+      name="i-simple-icons-bilibili"
+      class="h-5 w-5"
+    />
   </NuxtLink>
 </template>
 

diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
@@ -20,10 +20,7 @@
       >
         {{ currentCourseInfo }}
       </div>
-      <MainStudyVideoLink
-        class="icon-item ml-1"
-        :video="courseStore.currentCourse?.video"
-      />
+      <MainStudyVideoLink :video="courseStore.currentCourse?.video" />
     </div>
 
     <!-- 右侧 -->
@@ -34,21 +31,30 @@
         @click="pauseGame"
         @mouseenter="$lazyTippy"
       >
-        <span class="clickable-item icon-item i-ph-pause-bold"></span>
+        <UIcon
+          name="i-ph-pause"
+          class="clickable-item h-6 w-6"
+        />
       </div>
       <div
         data-tippy-content="重置当前课程进度"
         @click="handleDoAgain"
         @mouseenter="$lazyTippy"
       >
-        <span class="clickable-item icon-item i-ph-arrow-counter-clockwise"></span>
+        <UIcon
+          name="i-ph-arrow-counter-clockwise"
+          class="clickable-item h-6 w-6"
+        />
       </div>
       <div
         data-tippy-content="排行榜"
         @click="rankingStore.showRankModal"
         @mouseenter="$lazyTippy"
       >
-        <span class="clickable-item icon-item i-ph-ranking"></span>
+        <UIcon
+          name="i-ph-ranking"
+          class="clickable-item h-6 w-6"
+        />
       </div>
     </div>
 
@@ -146,8 +152,4 @@ function useDoAgain() {
 .clickable-item {
   @apply cursor-pointer select-none hover:text-fuchsia-500;
 }
-
-.icon-item {
-  @apply h-6 w-6;
-}
 </style>
diff --git a/apps/client/pages/mastered-elements.vue b/apps/client/pages/mastered-elements.vue
@@ -31,9 +31,10 @@
         @click="removeItem(item)"
         class="cursor-pointer transition-transform duration-300 hover:scale-110"
       >
-        <span
-          class="clickable-item icon-item i-ph-trash-bold h-5 w-5 text-purple-600 dark:text-purple-300"
-        ></span>
+        <UIcon
+          name="i-ph-trash-bold"
+          class="h-5 w-5"
+        />
       </div>
     </div>
   </div>