refactor icons

src/oj/announcement/list.vue

@@ -6,6 +6,7 @@ import { Announcement } from "~/utils/types"
 import { isDesktop } from "~/shared/composables/breakpoints"
 import { NTag } from "naive-ui"
 import TitleWithTag from "./components/TitleWithTag.vue"
+import { Icon } from "@iconify/vue"
 
 const total = ref(0)
 const content = ref("")
@@ -25,7 +26,7 @@ const columns: DataTableColumn<Announcement>[] = [
   {
     key: "tag",
     title: "标签",
-    render: (row) => h(NTag, row.tag || "公告"),
+    render: (row) => h(NTag, () => row.tag || "公告"),
   },
   {
     key: "create_time",

src/oj/contest/components/ContestInfo.vue

@@ -2,7 +2,7 @@
 import { parseTime } from "utils/functions"
 import { useContestStore } from "oj/store/contest"
 import ContestType from "~/shared/components/ContestType.vue"
-import Info from "~/shared/icons/Info.vue"
+import { Icon } from "@iconify/vue"
 
 const contestStore = useContestStore()
 </script>
@@ -16,7 +16,7 @@ const contestStore = useContestStore()
     <template #trigger>
       <n-button>
         <template #icon>
-          <Info />
+          <Icon icon="openmoji:compass"></Icon>
         </template>
         比赛信息
       </n-button>

src/oj/contest/detail.vue

@@ -4,7 +4,7 @@ import { isDesktop } from "~/shared/composables/breakpoints"
 import { useContestStore } from "../store/contest"
 import ContestInfo from "./components/ContestInfo.vue"
 import ContestMenu from "./components/ContestMenu.vue"
-import Lock from "~/shared/icons/Lock.vue"
+import { Icon } from "@iconify/vue"
 
 const props = defineProps<{
   contestID: string
@@ -33,10 +33,13 @@ const passwordFormVisible = computed(
   <n-space vertical size="large" v-if="contestStore.contest">
     <n-space align="center" justify="space-between">
       <n-space align="center">
+        <Icon
+          v-if="contestStore.isPrivate"
+          icon="openmoji:locked"
+          :width="30"
+          :height="30"
+        ></Icon>
         <h2 class="contestTitle">{{ contestStore.contest.title }}</h2>
-        <n-icon size="large" v-if="contestStore.isPrivate" class="lockIcon">
-          <Lock />
-        </n-icon>
         <n-tag
           size="small"
           :type="CONTEST_STATUS[contestStore.contestStatus]['type']"
@@ -79,7 +82,4 @@ const passwordFormVisible = computed(
   font-weight: 500;
   margin: 0;
 }
-.lockIcon {
-  transform: translateY(2px);
-}
 </style>

src/oj/contest/pages/rank.vue

@@ -7,7 +7,7 @@ import { ContestRank, ProblemFiltered } from "~/utils/types"
 import { secondsToDuration } from "utils/functions"
 import { ContestStatus } from "~/utils/constants"
 import { useContestStore } from "~/oj/store/contest"
-import Medal1 from "~/shared/icons/Medal1.vue"
+import { Icon } from "@iconify/vue"
 
 interface Props {
   contestID: string
@@ -132,22 +132,25 @@ async function addColumns() {
             }
             if (status.is_first_ac) {
               acTime = [
-                h(
-                  NIcon,
-                  { size: 16, style: "transform: translate(-2px, 2px)" },
-                  () => h(Medal1),
-                ),
-                secondsToDuration(status.ac_time),
+                h(Icon, {
+                  icon: "openmoji:1st-place-medal",
+                  height: 24,
+                  width: 24,
+                }),
+                h("span", secondsToDuration(status.ac_time)),
               ]
             }
             if (status.error_number) {
               errorNumber = h(
-                "p",
+                "span",
                 { style: "margin: 0" },
                 `(-${status.error_number})`,
               )
             }
-            return h("div", [acTime, errorNumber])
+            return h("div", { class: "oj-time-with-modal" }, [
+              acTime,
+              errorNumber,
+            ])
           }
         },
         cellProps: (row) => {
@@ -218,5 +221,8 @@ onMounted(() => {
     />
   </n-space>
 </template>
-
-<style scoped></style>
+<style>
+.oj-time-with-modal {
+  display: flex;
+}
+</style>

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>

src/oj/rank/components/Index.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import Medal1 from "~/shared/icons/Medal1.vue"
-import Medal2 from "~/shared/icons/Medal2.vue"
-import Medal3 from "~/shared/icons/Medal3.vue"
+import { Icon } from "@iconify/vue"
 
 interface Props {
   page: number
@@ -23,9 +21,9 @@ const tooltip = computed(() => {
   <n-tooltip v-else>
     <template #trigger>
       <n-icon :size="20">
-        <Medal1 v-if="index === 1" />
-        <Medal2 v-if="index === 2" />
-        <Medal3 v-if="index === 3" />
+        <Icon v-if="index === 1" icon="openmoji:1st-place-medal"></Icon>
+        <Icon v-if="index === 2" icon="openmoji:2nd-place-medal"></Icon>
+        <Icon v-if="index === 3" icon="openmoji:3rd-place-medal"></Icon>
       </n-icon>
     </template>
     {{ tooltip }}

src/oj/submission/components/ButtonWithSearch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Filter from "~/shared/icons/Filter.vue"
+import { Icon } from "@iconify/vue"
 
 defineEmits(["click", "search"])
 </script>
@@ -8,9 +8,7 @@ defineEmits(["click", "search"])
     <n-button text type="info" @click="$emit('click')"><slot></slot></n-button>
     <n-button text @click="$emit('search')">
       <template #icon>
-        <n-icon color="#ccc">
-          <Filter />
-        </n-icon>
+        <Icon icon="openmoji:filter"></Icon>
       </template>
     </n-button>
   </n-flex>

src/oj/submission/components/SubmissionLink.vue

@@ -5,9 +5,7 @@
     </n-button>
     <n-button text @click="goto">
       <template #icon>
-        <n-icon color="#aaa">
-          <Code />
-        </n-icon>
+        <Icon icon="openmoji:backhand-index-pointing-right"></Icon>
       </template>
     </n-button>
   </n-flex>
@@ -17,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import Code from "~/shared/icons/Code.vue"
+import { Icon } from "@iconify/vue"
 import { Submission } from "~/utils/types"
 
 interface Props {