refactor icons

package-lock.json

@@ -29,6 +29,7 @@
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
+        "@iconify/vue": "^4.1.2",
         "@types/node": "^20.14.2",
         "@vitejs/plugin-legacy": "^5.4.1",
         "@vitejs/plugin-vue": "^5.0.5",
@@ -2288,6 +2289,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.2.tgz",
+      "integrity": "sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.2",
     "@types/node": "^20.14.2",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",

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(
+                h(Icon, {
-                  NIcon,
+                  icon: "openmoji:1st-place-medal",
-                  { size: 16, style: "transform: translate(-2px, 2px)" },
+                  height: 24,
-                  () => h(Medal1),
+                  width: 24,
-                ),
+                }),
-                secondsToDuration(status.ac_time),
+                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>
-<style scoped></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 { Icon } from "@iconify/vue"
-import SemiSelect from "~/shared/icons/SemiSelect.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" />
+            <Icon
-            <Bulb v-else-if="isPending" />
+              v-if="judging || pending || submitting"
-            <Play v-else />
+              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 { Icon } from "@iconify/vue"
-import ArrowDown from "~/shared/icons/ArrowDown.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>
+          <Icon v-if="showTag" icon="ph:caret-down"></Icon>
-            <ArrowDown v-if="showTag" />
+          <Icon v-else icon="ph:caret-up"></Icon>
-            <ArrowUp v-else />
-          </n-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 { Icon } from "@iconify/vue"
-import Medal2 from "~/shared/icons/Medal2.vue"
-import Medal3 from "~/shared/icons/Medal3.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" />
+        <Icon v-if="index === 1" icon="openmoji:1st-place-medal"></Icon>
-        <Medal2 v-if="index === 2" />
+        <Icon v-if="index === 2" icon="openmoji:2nd-place-medal"></Icon>
-        <Medal3 v-if="index === 3" />
+        <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">
+        <Icon icon="openmoji:filter"></Icon>
-          <Filter />
-        </n-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">
+        <Icon icon="openmoji:backhand-index-pointing-right"></Icon>
-          <Code />
-        </n-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 {

src/shared/components/ContestTitle.vue

@@ -1,24 +1,19 @@
 <script setup lang="ts">
 import { Contest } from "utils/types"
 import { ContestType } from "utils/constants"
-import Lock from "~/shared/icons/Lock.vue"
+import { Icon } from "@iconify/vue"
 
 defineProps<{ contest: Contest }>()
 </script>
 <template>
-  <n-space>
+  <n-flex>
-    <span>{{ contest.title }}</span>
+    <Icon
-    <n-icon
-      size="large"
-      class="lockIcon"
       v-if="contest.contest_type === ContestType.private"
-    >
+      :height="20"
-      <Lock />
+      :width="20"
-    </n-icon>
+      icon="openmoji:locked"
-  </n-space>
+    ></Icon>
+    <span>{{ contest.title }}</span>
+  </n-flex>
 </template>
-<style scoped>
+<style scoped></style>
-.lockIcon {
-  transform: translateY(2px);
-}
-</style>

src/shared/components/Copy.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import copy from "copy-text-to-clipboard"
-import Select from "~/shared/icons/Select.vue"
+import { Icon } from "@iconify/vue"
-import Copy from "~/shared/icons/Copy.vue"
 
 defineProps<{ value: string }>()
 const [copied, toggle] = useToggle()
 const { start } = useTimeoutFn(() => toggle(false), 1000, { immediate: false })
 
+const COPY = h(Icon, { icon: "emojione:clipboard" })
+const OK = h(Icon, { icon: "openmoji:check-mark" })
+
 function handleClick(value: string) {
   copy(value)
   toggle(true)
@@ -17,7 +19,7 @@ function handleClick(value: string) {
   <n-tooltip trigger="hover">
     <template #trigger>
       <n-icon class="icon" @click="handleClick(value)">
-        <component :is="copied ? Select : Copy"></component>
+        <component :is="copied ? OK : COPY"></component>
       </n-icon>
     </template>
     {{ copied ? "已复制" : "复制" }}
@@ -26,6 +28,6 @@ function handleClick(value: string) {
 <style scoped>
 .icon {
   cursor: pointer;
-  transform: translateY(2px);
+  font-size: 20px;
 }
 </style>

src/shared/components/Header.vue

@@ -9,8 +9,7 @@ import {
   screenSwitchLabel,
   switchScreenMode,
 } from "~/shared/composables/switchScreen"
-import Sunny from "../icons/Sunny.vue"
+import { Icon } from "@iconify/vue"
-import Moon from "../icons/Moon.vue"
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
@@ -29,6 +28,31 @@ async function handleLogout() {
   router.replace("/")
 }
 
+function renderIcon(icon: string) {
+  return () => h(Icon, { icon })
+}
+
+const avatars = [
+  "openmoji:glowing-star",
+  "openmoji:heart-with-ribbon",
+  "openmoji:flag-china",
+  "openmoji:fish-cake-with-swirl",
+  "openmoji:astronaut",
+  "openmoji:alien-monster",
+  "openmoji:zany-face",
+  "openmoji:eyes",
+  "openmoji:desktop-computer",
+  "openmoji:watermelon",
+  "openmoji:cheese-wedge",
+  "openmoji:wrapped-gift",
+]
+
+const avatar = ref(avatars[Math.floor(Math.random() * avatars.length)])
+
+function getRandomAvatar() {
+  avatar.value = avatars[Math.floor(Math.random() * avatars.length)]
+}
+
 onMounted(() => {
   userStore.getMyProfile()
   configStore.getConfig()
@@ -38,29 +62,35 @@ const menus = computed<MenuOption[]>(() => [
   {
     label: () => h(RouterLink, { to: "/" }, { default: () => "题库" }),
     key: "problem",
+    icon: renderIcon("openmoji:jack-o-lantern"),
   },
   {
     label: () =>
       h(RouterLink, { to: "/submission" }, { default: () => "提交" }),
     key: "submission",
+    icon: renderIcon("openmoji:clown-face"),
   },
   {
     label: () => h(RouterLink, { to: "/contest" }, { default: () => "比赛" }),
     key: "contest",
+    icon: renderIcon("openmoji:face-with-tears-of-joy"),
   },
   {
     label: () => h(RouterLink, { to: "/rank" }, { default: () => "排名" }),
     key: "rank",
+    icon: renderIcon("openmoji:sports-medal"),
   },
   {
     label: () =>
       h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
     key: "announcement",
+    icon: renderIcon("openmoji:hamburger"),
   },
   {
     label: () => h(RouterLink, { to: "/admin" }, { default: () => "后台" }),
     show: userStore.isAdminRole,
     key: "admin",
+    icon: renderIcon("openmoji:hacker-cat"),
   },
 ])
 
@@ -130,7 +160,12 @@ function goHome() {
       </n-button>
       <div v-if="userStore.isFinished">
         <n-dropdown v-if="userStore.isAuthed" :options="options">
-          <n-button>{{ userStore.user!.username }}</n-button>
+          <n-button @click="getRandomAvatar">
+            <template #icon>
+              <Icon :icon="avatar"></Icon>
+            </template>
+            {{ userStore.user!.username }}
+          </n-button>
         </n-dropdown>
         <n-space align="center" v-else>
           <n-button @click="toggleLogin(true)">登录</n-button>
@@ -144,8 +179,8 @@ function goHome() {
       </div>
       <n-button circle @click="toggleDark()">
         <template #icon>
-          <n-icon v-if="isDark"><Sunny /></n-icon>
+          <Icon v-if="isDark" icon="ph:sun"></Icon>
-          <n-icon v-else> <Moon /></n-icon>
+          <Icon v-else icon="ph:moon"></Icon>
         </template>
       </n-button>
     </n-space>

src/shared/icons/ArrowDown.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/ArrowUp.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Bulb.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M12 22q-.825 0-1.413-.588T10 20h4q0 .825-.588 1.413T12 22Zm-4-3v-2h8v2H8Zm.25-3q-1.725-1.025-2.738-2.75T4.5 9.5q0-3.125 2.188-5.313T12 2q3.125 0 5.313 2.188T19.5 9.5q0 2.025-1.012 3.75T15.75 16h-7.5Zm.6-2h6.3q1.125-.8 1.738-1.975T17.5 9.5q0-2.3-1.6-3.9T12 4Q9.7 4 8.1 5.6T6.5 9.5q0 1.35.613 2.525T8.85 14ZM12 14Z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Code.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Copy.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M9 18q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm-4 6q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-6V4v12Z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Filter.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Info.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M11 17h2v-6h-2v6Zm1-8q.425 0 .713-.288T13 8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8q0 .425.288.713T12 9Zm0 13q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Loading.vue

@@ -1,139 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <circle cx="12" cy="2" r="0" fill="currentColor">
-      <animate
-        attributeName="r"
-        begin="0"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(45 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.125s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(90 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.25s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(135 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.375s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(180 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.5s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(225 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.625s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(270 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.75s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-    <circle
-      cx="12"
-      cy="2"
-      r="0"
-      fill="currentColor"
-      transform="rotate(315 12 12)"
-    >
-      <animate
-        attributeName="r"
-        begin="0.875s"
-        calcMode="spline"
-        dur="1s"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-        repeatCount="indefinite"
-        values="0;2;0;0"
-      ></animate>
-    </circle>
-  </svg>
-</template>

src/shared/icons/Lock.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M6 22q-.825 0-1.413-.588T4 20V10q0-.825.588-1.413T6 8h1V6q0-2.075 1.463-3.538T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.588 1.413T18 22H6Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.588T14 15q0-.825-.588-1.413T12 13q-.825 0-1.413.588T10 15q0 .825.588 1.413T12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6v2ZM6 20V10v10Z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Medal1.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 36 36"
-  >
-    <path fill="#55ACEE" d="m18 8l-7-8H0l14 17l11.521-4.75z"></path>
-    <path fill="#3B88C3" d="m25 0l-7 8l5.39 7.312l1.227-1.489L36 0z"></path>
-    <path
-      fill="#FFAC33"
-      d="M23.205 16.026c.08-.217.131-.448.131-.693a2 2 0 0 0-2-2h-6.667a2 2 0 0 0-2 2c0 .245.05.476.131.693c-3.258 1.826-5.464 5.307-5.464 9.307C7.335 31.224 12.111 36 18.002 36s10.667-4.776 10.667-10.667c0-4-2.206-7.481-5.464-9.307z"
-    ></path>
-    <path
-      fill="#9E5200"
-      d="M19.404 18.6h-1.721l-2.73 2.132a.528.528 0 0 0-.112.28v1.178c0 .186.15.354.337.354h1.795v8.414c0 .188.15.355.355.355h2.076c.186 0 .336-.168.336-.355V18.954c0-.186-.149-.354-.336-.354z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Medal2.vue

@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 36 36"
-  >
-    <path fill="#55ACEE" d="m18 8l-7-8H0l14 17l11.521-4.75z"></path>
-    <path fill="#3B88C3" d="m25 0l-7 8l5.39 7.312l1.227-1.489L36 0z"></path>
-    <path
-      fill="#CCD6DD"
-      d="M23.205 16.026c.08-.217.131-.448.131-.693a2 2 0 0 0-2-2h-6.667a2 2 0 0 0-2 2c0 .245.05.476.131.693c-3.258 1.826-5.464 5.307-5.464 9.307C7.335 31.224 12.111 36 18.002 36s10.667-4.776 10.667-10.667c0-4-2.206-7.481-5.464-9.307z"
-    ></path>
-    <path
-      fill="#627077"
-      d="M22.002 28.921h-3.543c.878-1.234 2.412-3.234 3.01-4.301c.449-.879.729-1.439.729-2.43c0-2.076-1.57-3.777-4.244-3.777c-2.225 0-3.74 1.832-3.74 1.832c-.131.15-.112.374.019.487l1.141 1.159a.36.36 0 0 0 .523 0c.355-.393 1.047-.935 1.813-.935c1.047 0 1.646.635 1.646 1.346c0 .523-.243 1.047-.486 1.421c-1.104 1.682-3.871 5.441-4.955 6.862v.374c0 .188.149.355.355.355h7.732a.368.368 0 0 0 .355-.355v-1.682a.367.367 0 0 0-.355-.356z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Medal3.vue

@@ -1,37 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 128 128"
-  >
-    <defs><path id="notoV13rdPlaceMedal0" d="M0 0h128v128H0z"></path></defs>
-    <clipPath id="notoV13rdPlaceMedal1">
-      <use href="#notoV13rdPlaceMedal0"></use>
-    </clipPath>
-    <g clipPath="url(#notoV13rdPlaceMedal1)">
-      <path fill="#006ca2" d="M50.14 61.85h25.59L107.72 0H82.13z"></path>
-      <path
-        fill="#2f2f2f"
-        d="M66.13 30.92L53.34 55.67l3.2 6.18h19.19l3.2-6.18z"
-      ></path>
-      <path
-        fill="#f79329"
-        d="M77.77 76.78H52.18V61.85h25.59v14.93zm0-21.33H52.18a6.4 6.4 0 0 0-6.4 6.4v14.93c0 3.54 2.86 6.4 6.4 6.4h25.59c3.54 0 6.4-2.86 6.4-6.4V61.85c0-3.54-2.86-6.4-6.4-6.4"
-      ></path>
-      <path
-        fill="#f79329"
-        d="M96.97 95.97c0 17.67-14.32 31.99-31.99 31.99c-17.67 0-31.99-14.32-31.99-31.99c0-17.67 14.32-31.99 31.99-31.99c17.67 0 31.99 14.33 31.99 31.99"
-      ></path>
-      <path
-        fill="#fff"
-        d="M43.53 88.19c-.42 0-.84-.08-1.24-.26c-1.54-.66-2.28-2.45-1.68-4.01c.01-.03.02-.05.03-.07c.01-.05.01-.04.04-.08A22.803 22.803 0 0 1 56.56 70.4c.35-.08.72.09.88.42c.16.33.07.73-.22.96c-4.67 3.71-8.4 8.72-10.79 14.47c0 .01-.01.02-.01.02c0 .01 0 .01-.01.02c-.33.77-.94 1.37-1.72 1.67c-.37.16-.77.23-1.16.23"
-      ></path>
-      <path fill="#006ca2" d="M77.86 61.85H52.27L20.28 0h25.59z"></path>
-      <path
-        fill="#ae3d09"
-        d="M64.7 111.85h.16c1.81-.03 5.24-.43 7.86-2.78c2.18-1.96 3.19-4.64 2.78-7.36c-.39-2.53-1.98-4.68-4.41-6.01c2.33-1.75 3.73-3.94 3.97-6.22c.24-2.21-.63-4.41-2.5-6.37c-1.88-1.97-4.42-3.01-7.33-3.01c-4.49 0-8.62 2.37-9.87 4.09c-.11.14-.11.34-.01.5l2.79 4.03c.07.1.17.17.29.18c.11.02.24-.01.33-.09c.03-.02 3.06-2.51 5.65-2.51c1.18 0 2.05.52 2.67 1.58c.51.89.61 1.7.3 2.48c-.85 2.1-4.45 3.17-4.48 3.18c-.18.05-.31.22-.31.41v3.55c0 .2.13.37.33.41c.04.01 3.46.86 4.24 2.82c.31.77.15 1.64-.46 2.59c-.65 1-1.63 1.51-2.92 1.51c-2.5 0-5.56-1.9-6.9-3.09a.443.443 0 0 0-.33-.11c-.13.01-.23.08-.3.18l-2.79 4.03c-.11.16-.1.37.03.52c.17.23 4.73 5.49 11.21 5.49"
-      ></path>
-    </g>
-  </svg>
-</template>

src/shared/icons/Moon.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362q.15.225.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.938 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Play.vue

@@ -1,10 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path fill="currentColor" d="M8 19V5l11 7l-11 7Z"></path>
-  </svg>
-</template>

src/shared/icons/Select.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 1024 1024"
-  >
-    <path
-      fill="currentColor"
-      d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04l-316.8-316.8a64 64 0 0 1 0-90.496z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/SemiSelect.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 1024 1024"
-  >
-    <path
-      fill="currentColor"
-      d="M128 448h768q64 0 64 64t-64 64H128q-64 0-64-64t64-64z"
-    ></path>
-  </svg>
-</template>

src/shared/icons/Sunny.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-  >
-    <path
-      fill="currentColor"
-      d="M12 5q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm4.95 2.05q-.275-.275-.275-.687t.275-.713l1.4-1.425q.3-.3.712-.3t.713.3q.275.275.275.7t-.275.7L18.35 7.05q-.275.275-.7.275t-.7-.275ZM20 13q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8 10q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05l-1.425-1.4q-.3-.3-.3-.725t.3-.7q.275-.275.7-.275t.7.275L7.05 5.65q.275.275.275.7t-.275.7q-.3.275-.7.275t-.7-.275Zm12.7 12.725l-1.4-1.425q-.275-.3-.275-.713t.275-.687q.275-.275.688-.275t.712.275l1.425 1.4q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm2.225 6.775q-.275-.275-.275-.7t.275-.7L5.65 16.95q.275-.275.687-.275t.713.275q.3.3.3.713t-.3.712l-1.4 1.4q-.3.3-.725.3t-.7-.3ZM12 18q-2.5 0-4.25-1.75T6 12q0-2.5 1.75-4.25T12 6q2.5 0 4.25 1.75T18 12q0 2.5-1.75 4.25T12 18Zm0-2q1.65 0 2.825-1.175T16 12q0-1.65-1.175-2.825T12 8q-1.65 0-2.825 1.175T8 12q0 1.65 1.175 2.825T12 16Zm0-4Z"
-    ></path>
-  </svg>
-</template>