refactor icons

src/oj/problem/components/ProblemStatus.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useThemeVars } from "naive-ui"
-import Select from "~/shared/icons/Select.vue"
-import SemiSelect from "~/shared/icons/SemiSelect.vue"
+import { Icon } from "@iconify/vue"
 
 const theme = useThemeVars()
 const props = defineProps<{
@@ -13,17 +12,12 @@ const color = computed(() => {
   if (props.status === "passed") return theme.value.successColor
   if (props.status === "failed") return theme.value.errorColor
 })
-
-const Icon = computed(() => {
-  if (props.status === "passed") return Select
-  if (props.status === "failed") return SemiSelect
-  return {}
-})
 </script>
 
 <template>
   <n-icon v-if="showIcon" :color="color">
-    <component :is="Icon"></component>
+    <Icon icon="ep:select" v-if="status === 'passed'"></Icon>
+    <Icon icon="ep:semi-select" v-if="status === 'failed'"></Icon>
   </n-icon>
 </template>
 

src/oj/problem/components/Submit.vue

@@ -8,11 +8,9 @@ import { Submission, SubmitCodePayload } from "utils/types"
 import { getSubmission, submitCode } from "oj/api"
 import SubmissionResultTag from "~/shared/components/SubmissionResultTag.vue"
 import { useUserStore } from "~/shared/store/user"
-import Loading from "~/shared/icons/Loading.vue"
-import Bulb from "~/shared/icons/Bulb.vue"
-import Play from "~/shared/icons/Play.vue"
 // @ts-ignore
 import confetti from "canvas-confetti"
+import { Icon } from "@iconify/vue"
 
 const userStore = useUserStore()
 const route = useRoute()
@@ -218,9 +216,12 @@ watch(
       >
         <template #icon>
           <n-icon>
-            <Loading v-if="judging || pending || submitting" />
-            <Bulb v-else-if="isPending" />
-            <Play v-else />
+            <Icon
+              v-if="judging || pending || submitting"
+              icon="eos-icons:loading"
+            ></Icon>
+            <Icon v-else-if="isPending" icon="ph:lightbulb-fill"></Icon>
+            <Icon v-else icon="ph:play-fill"></Icon>
           </n-icon>
         </template>
         {{ submitLabel }}

src/oj/problem/list.vue

@@ -8,8 +8,7 @@ import { useUserStore } from "~/shared/store/user"
 import { getProblemTagList } from "~/shared/api"
 import Pagination from "~/shared/components/Pagination.vue"
 import { isDesktop } from "~/shared/composables/breakpoints"
-import ArrowUp from "~/shared/icons/ArrowUp.vue"
-import ArrowDown from "~/shared/icons/ArrowDown.vue"
+import { Icon } from "@iconify/vue"
 
 interface Tag {
   id: number
@@ -222,10 +221,8 @@ function rowProps(row: ProblemFiltered) {
       </n-form>
       <n-button @click="toggleShowTag()" quaternary icon-placement="right">
         <template #icon>
-          <n-icon>
-            <ArrowDown v-if="showTag" />
-            <ArrowUp v-else />
-          </n-icon>
+          <Icon v-if="showTag" icon="ph:caret-down"></Icon>
+          <Icon v-else icon="ph:caret-up"></Icon>
         </template>
         标签
       </n-button>