From 784bc069da12c7d1fd587a512d1c08ff13da3e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Fri, 31 Dec 2021 16:30:35 +0800
Subject: [PATCH] refactor(docs): auto import icons & optimize details (#5087)

---
 .../vitepress/components/common/vp-link.vue   |   3 +-
 .../components/doc-content/vp-edit-link.vue   |  10 +-
 .../doc-content/vp-last-updated-at.vue        |   9 +-
 .../components/globals/parallax-home.vue      |   2 +-
 .../vitepress/components/icons/copy-icon.vue  |  13 --
 .../components/icons/external-link-icon.vue   |  16 ---
 .../vitepress/components/icons/github.vue     |  19 ---
 .../components/icons/play-circle-line.vue     |  20 ---
 .../components/icons/source-code.vue          |  13 --
 .../components/icons/translation-icon.vue     |  12 --
 .../components/navbar/vp-translation.vue      |   4 +-
 .../vitepress/components/vp-demo.vue          | 107 ++++++---------
 .../vitepress/composables/social-links.ts     |   2 +-
 docs/.vitepress/vitepress/styles/mixins.scss  |   2 +-
 docs/package.json                             |   3 +
 docs/vite.config.ts                           |  25 +++-
 pnpm-lock.yaml                                | 122 +++++++++++++++++-
 17 files changed, 196 insertions(+), 186 deletions(-)
 delete mode 100644 docs/.vitepress/vitepress/components/icons/copy-icon.vue
 delete mode 100644 docs/.vitepress/vitepress/components/icons/external-link-icon.vue
 delete mode 100644 docs/.vitepress/vitepress/components/icons/github.vue
 delete mode 100644 docs/.vitepress/vitepress/components/icons/play-circle-line.vue
 delete mode 100644 docs/.vitepress/vitepress/components/icons/source-code.vue
 delete mode 100644 docs/.vitepress/vitepress/components/icons/translation-icon.vue

diff --git a/docs/.vitepress/vitepress/components/common/vp-link.vue b/docs/.vitepress/vitepress/components/common/vp-link.vue
index 7926a857f9..ac21a04ef4 100644
--- a/docs/.vitepress/vitepress/components/common/vp-link.vue
+++ b/docs/.vitepress/vitepress/components/common/vp-link.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import ExternalLink from '../icons/external-link-icon.vue'
 
 const props = defineProps<{
   href?: string
@@ -21,7 +20,7 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
   >
     <slot />
     <ElIcon v-if="isExternal && !noIcon">
-      <ExternalLink class="link-icon" />
+      <i-ri-external-link-line class="link-icon" />
     </ElIcon>
   </component>
 </template>
diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue b/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
index f7dc4e8719..4727e62f0a 100644
--- a/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-edit-link.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useEditLink } from '../../composables/edit-link'
-import ExternalIcon from '../icons/external-link-icon.vue'
 
 const { url, text } = useEditLink()
 </script>
@@ -9,14 +8,14 @@ const { url, text } = useEditLink()
   <div class="edit-link">
     <a
       v-if="url"
-      class="link"
+      class="link text-sm"
       :href="url"
       target="_blank"
       rel="noopener noreferrer"
     >
       {{ text }}
       <ElIcon :size="16" style="vertical-align: text-top; line-height: 24px">
-        <ExternalIcon />
+        <i-ri-external-link-line />
       </ElIcon>
     </a>
   </div>
@@ -25,7 +24,6 @@ const { url, text } = useEditLink()
 <style scoped>
 .link {
   display: inline-block;
-  font-size: 1rem;
   font-weight: 500;
   color: var(--text-color-light);
 }
@@ -34,8 +32,4 @@ const { url, text } = useEditLink()
   text-decoration: none;
   color: var(--brand-color);
 }
-
-.icon {
-  margin-left: 4px;
-}
 </style>
diff --git a/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue b/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue
index 3dc4c478bc..d32177b345 100644
--- a/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue
+++ b/docs/.vitepress/vitepress/components/doc-content/vp-last-updated-at.vue
@@ -18,7 +18,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <p class="last-updated">
+  <p class="last-updated text-sm">
     <span class="prefix">{{ prefix }}:</span>
     <span class="datetime">{{ datetime }}</span>
   </p>
@@ -31,7 +31,6 @@ onMounted(() => {
   display: inline-block;
   margin: 0;
   line-height: 1.4;
-  font-size: 0.9rem;
   color: var(--text-color-light);
 
   .prefix {
@@ -45,10 +44,4 @@ onMounted(() => {
     font-weight: 400;
   }
 }
-
-@include respond-to('lg') {
-  .last-updated {
-    font-size: 1rem;
-  }
-}
 </style>
diff --git a/docs/.vitepress/vitepress/components/globals/parallax-home.vue b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
index 946f95cf4d..ba3ecf81b8 100644
--- a/docs/.vitepress/vitepress/components/globals/parallax-home.vue
+++ b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
@@ -109,7 +109,7 @@ useEventListener(window, 'scroll', handleScroll)
         </a>
       </div>
       <div class="join">
-        <el-tooltip placement="top" hide-after="1000" offset="20">
+        <el-tooltip placement="top" :hide-after="1000" :offset="20">
           <template #content>
             {{ homeLang['21'] }}
             <a href="mailto:element-plus@outlook.com" target="_blank">
diff --git a/docs/.vitepress/vitepress/components/icons/copy-icon.vue b/docs/.vitepress/vitepress/components/icons/copy-icon.vue
deleted file mode 100644
index c49f4a23d3..0000000000
--- a/docs/.vitepress/vitepress/components/icons/copy-icon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"
-    />
-  </svg>
-</template>
diff --git a/docs/.vitepress/vitepress/components/icons/external-link-icon.vue b/docs/.vitepress/vitepress/components/icons/external-link-icon.vue
deleted file mode 100644
index c112df8bac..0000000000
--- a/docs/.vitepress/vitepress/components/icons/external-link-icon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <svg
-    class="link-icon"
-    viewBox="0 0 1024 1024"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M853.333333 469.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667 42.666667 0 0 1-42.666667-42.666667V256a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 0 0-85.333333H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128v-256a42.666667 42.666667 0 0 0-42.666667-42.666667z"
-      fill="currentColor"
-    ></path>
-    <path
-      d="M682.666667 213.333333h67.413333l-268.373333 267.946667a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0L810.666667 273.92V341.333333a42.666667 42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-170.666666a42.666667 42.666667 0 0 0 0 85.333333z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/docs/.vitepress/vitepress/components/icons/github.vue b/docs/.vitepress/vitepress/components/icons/github.vue
deleted file mode 100644
index 4e63addb74..0000000000
--- a/docs/.vitepress/vitepress/components/icons/github.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
-    />
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'GithubIcon',
-}
-</script>
diff --git a/docs/.vitepress/vitepress/components/icons/play-circle-line.vue b/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
deleted file mode 100644
index c0f92454ff..0000000000
--- a/docs/.vitepress/vitepress/components/icons/play-circle-line.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"
-    />
-  </svg>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PlayCircleLineIcon',
-})
-</script>
diff --git a/docs/.vitepress/vitepress/components/icons/source-code.vue b/docs/.vitepress/vitepress/components/icons/source-code.vue
deleted file mode 100644
index 75abfdce79..0000000000
--- a/docs/.vitepress/vitepress/components/icons/source-code.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"
-    />
-  </svg>
-</template>
diff --git a/docs/.vitepress/vitepress/components/icons/translation-icon.vue b/docs/.vitepress/vitepress/components/icons/translation-icon.vue
deleted file mode 100644
index 0473b48a63..0000000000
--- a/docs/.vitepress/vitepress/components/icons/translation-icon.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <svg viewBox="0 0 512 512">
-    <path
-      d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
-      fill="currentColor"
-    ></path>
-    <path
-      d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
index 7ffaa82b56..86999f0a02 100644
--- a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
@@ -2,8 +2,6 @@
 import VPLink from '../common/vp-link.vue'
 import { useTranslation } from '../../composables/translation'
 
-import TranslationIcon from '../icons/translation-icon.vue'
-
 const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
 </script>
 
@@ -17,7 +15,7 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
       >
         <template #reference>
           <ElIcon :size="20">
-            <TranslationIcon />
+            <i-ri-translate-2 />
           </ElIcon>
         </template>
         <div
diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
index 4e681c5ae3..17b2bb0e37 100644
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -7,56 +7,21 @@ import { useSourceCode } from '../composables/source-code'
 import { usePlayGround } from '../composables/use-playground'
 
 import demoBlockLocale from '../../i18n/component/demo-block.json'
-import GithubIcon from './icons/github.vue'
-import SourceCodeIcon from './icons/source-code.vue'
-import PlayCircleLine from './icons/play-circle-line.vue'
-import CopyIcon from './icons/copy-icon.vue'
 
 import Example from './demo/vp-example.vue'
 import SourceCode from './demo/vp-source-code.vue'
 
-const props = defineProps({
-  // source is encoded via encodeURIComponent
-  source: {
-    type: String,
-    required: true,
-  },
-  path: {
-    type: String,
-    required: true,
-  },
-  css: {
-    type: String,
-    required: true,
-  },
-  cssPreProcessor: {
-    type: String,
-    required: true,
-  },
-  js: {
-    type: String,
-    required: true,
-  },
-  jsPreProcessor: {
-    type: String,
-    required: true,
-  },
-  html: {
-    type: String,
-    required: true,
-  },
-  demos: {
-    type: Object,
-    required: true,
-  },
-  rawSource: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-  },
-})
+const props = defineProps<{
+  source: string
+  path: string
+  css?: string
+  cssPreProcessor?: string
+  js?: string
+  html?: string
+  demos: object
+  rawSource: string
+  description?: string
+}>()
 
 const vm = getCurrentInstance()!
 
@@ -107,33 +72,39 @@ const copyCode = async () => {
 <template>
   <ClientOnly>
     <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
-    <p class="example-description" v-html="decodedDescription" />
+    <p text="sm" v-html="decodedDescription" />
     <div class="example">
       <div class="op-btns">
         <ElTooltip :content="locale['edit-in-editor']" :visible-arrow="false">
           <ElIcon :size="20" class="op-btn">
-            <PlayCircleLine @click="onPlaygroundClicked" />
+            <i-ri-play-circle-line @click="onPlaygroundClicked" />
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['edit-on-github']" :visible-arrow="false">
-          <ElIcon :size="20" class="op-btn github">
+          <ElIcon
+            :size="20"
+            class="op-btn github"
+            style="color: var(--text-color-light)"
+          >
             <a :href="demoSourceUrl" rel="noreferrer noopener" target="_blank">
-              <GithubIcon />
+              <i-ri-github-line />
             </a>
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['copy-code']" :visible-arrow="false">
           <ElIcon :size="20" class="op-btn" @click="copyCode">
-            <CopyIcon />
+            <!-- <CopyIcon /> -->
+            <i-ri-file-copy-2-line />
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['view-source']" :visible-arrow="false">
           <ElIcon :size="20" class="op-btn" @click="setSourceVisible">
-            <SourceCodeIcon />
+            <!-- <SourceCodeIcon /> -->
+            <i-ri-code-line />
           </ElIcon>
         </ElTooltip>
       </div>
-      <ElDivider />
+      <ElDivider class="m-0" />
       <Example :file="path" :demo="formatPathDemos[path]" />
       <ElDivider v-if="sourceVisible" />
       <el-collapse-transition>
@@ -144,9 +115,6 @@ const copyCode = async () => {
 </template>
 
 <style scoped lang="scss">
-.example-description {
-  font-size: 14px;
-}
 .example {
   border: 1px solid var(--border-color);
   border-radius: var(--el-border-radius-base);
@@ -160,18 +128,27 @@ const copyCode = async () => {
     height: 3rem;
     line-height: 3rem;
 
-    .op-btn {
-      margin: 0 0.5rem;
-      cursor: pointer;
-      color: var(--text-color);
-
-      &.github a {
+    .el-icon {
+      &:hover {
         color: var(--text-color);
       }
     }
-  }
-  .el-divider {
-    margin: 0;
+
+    .op-btn {
+      margin: 0 0.5rem;
+      cursor: pointer;
+      color: var(--text-color-lighter);
+      transition: 0.2s;
+
+      &.github a {
+        transition: 0.2s;
+        color: var(--text-color-lighter);
+
+        &:hover {
+          color: var(--text-color);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/docs/.vitepress/vitepress/composables/social-links.ts b/docs/.vitepress/vitepress/composables/social-links.ts
index c5e5ab4bad..3925dbb7d8 100644
--- a/docs/.vitepress/vitepress/composables/social-links.ts
+++ b/docs/.vitepress/vitepress/composables/social-links.ts
@@ -1,4 +1,4 @@
-import GitHubIcon from '../components/icons/github.vue'
+import GitHubIcon from '~icons/ri/github-fill'
 
 export const useSocialLinks = () => {
   return [
diff --git a/docs/.vitepress/vitepress/styles/mixins.scss b/docs/.vitepress/vitepress/styles/mixins.scss
index ab63222854..966ecc5cec 100644
--- a/docs/.vitepress/vitepress/styles/mixins.scss
+++ b/docs/.vitepress/vitepress/styles/mixins.scss
@@ -4,7 +4,7 @@
 
 @mixin with-bg {
   background-color: var(--bg-color);
-  color: var(--text-color-light);
+  color: var(--text-color);
   transition: border-color var(--el-transition-duration),
     background-color var(--el-transition-duration);
 }
diff --git a/docs/package.json b/docs/package.json
index 8f6353417c..c5e53aee63 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,11 +20,14 @@
   },
   "devDependencies": {
     "@crowdin/cli": "3.7.4",
+    "@iconify-json/ri": "^1.0.2",
     "@types/markdown-it": "12.2.3",
     "cross-env": "7.0.3",
     "escape-html": "1.0.3",
     "markdown-it": "12.3.0",
     "markdown-it-container": "3.0.0",
+    "unplugin-icons": "^0.13.0",
+    "unplugin-vue-components": "0.17.11",
     "vite-plugin-inspect": "0.3.11",
     "vite-plugin-windicss": "1.6.1",
     "vitepress": "0.20.10"
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index f193687e74..65765c3de4 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -2,6 +2,11 @@ import path from 'path'
 import Inspect from 'vite-plugin-inspect'
 import { defineConfig } from 'vite'
 import WindiCSS from 'vite-plugin-windicss'
+
+import Components from 'unplugin-vue-components/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
 import { projRoot } from './.vitepress/utils/paths'
 import type { Alias } from 'vite'
 
@@ -39,7 +44,25 @@ export default defineConfig({
       },
     },
   },
-  plugins: [WindiCSS(), Inspect()],
+  plugins: [
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // custom resolvers
+      resolvers: [
+        // auto import icons
+        // https://github.com/antfu/unplugin-icons
+        IconsResolver(),
+      ],
+    }),
+
+    // https://github.com/antfu/unplugin-icons
+    Icons({
+      autoInstall: true,
+    }),
+
+    WindiCSS(),
+    Inspect(),
+  ],
   optimizeDeps: {
     include: [
       'vue',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6758bb15f6..e5fbbbcd9a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,7 @@ importers:
       '@crowdin/cli': 3.7.4
       '@docsearch/js': 3.0.0-alpha.42
       '@docsearch/react': 3.0.0-alpha.42
+      '@iconify-json/ri': ^1.0.2
       '@types/markdown-it': 12.2.3
       '@vueuse/core': 7.4.3
       axios: 0.24.0
@@ -161,6 +162,8 @@ importers:
       markdown-it-container: 3.0.0
       normalize.css: 8.0.1
       nprogress: 0.2.0
+      unplugin-icons: ^0.13.0
+      unplugin-vue-components: 0.17.11
       vite-plugin-inspect: 0.3.11
       vite-plugin-windicss: 1.6.1
       vitepress: 0.20.10
@@ -170,16 +173,19 @@ importers:
       '@vueuse/core': 7.4.3_vue@3.2.26
       axios: 0.24.0
       clipboard-copy: 4.0.1
-      element-plus: 1.2.0-beta.6_vue@3.2.26
+      element-plus: 1.3.0-beta.1_vue@3.2.26
       normalize.css: 8.0.1
       nprogress: 0.2.0
     devDependencies:
       '@crowdin/cli': 3.7.4
+      '@iconify-json/ri': 1.0.2
       '@types/markdown-it': 12.2.3
       cross-env: 7.0.3
       escape-html: 1.0.3
       markdown-it: 12.3.0
       markdown-it-container: 3.0.0
+      unplugin-icons: 0.13.0_rollup@2.62.0
+      unplugin-vue-components: 0.17.11_rollup@2.62.0+vue@3.2.26
       vite-plugin-inspect: 0.3.11
       vite-plugin-windicss: 1.6.1
       vitepress: 0.20.10_sass@1.45.2
@@ -364,12 +370,25 @@ packages:
       '@algolia/logger-common': 4.10.5
       '@algolia/requester-common': 4.10.5
 
+  /@antfu/install-pkg/0.1.0:
+    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
   /@antfu/utils/0.3.0:
     resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
     dependencies:
       '@types/throttle-debounce': 2.1.0
     dev: true
 
+  /@antfu/utils/0.4.0:
+    resolution: {integrity: sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==}
+    dependencies:
+      '@types/throttle-debounce': 2.1.0
+    dev: true
+
   /@babel/code-frame/7.15.8:
     resolution: {integrity: sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==}
     engines: {node: '>=6.9.0'}
@@ -1024,6 +1043,22 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/ri/1.0.2:
+    resolution: {integrity: sha512-PZMjoNE05S1PTcQHdIla/0htpmvMV2JvNwDzfEWVNGsLRG+htZuwozY9iiua6PGqmTw+kfBklvqrkTpzCpZvhQ==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
+  /@iconify/types/1.0.12:
+    resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==}
+    dev: true
+
+  /@iconify/utils/1.0.20:
+    resolution: {integrity: sha512-J5IriR8KeANs8vIEFKWzOlOvNgZHkwqkmqaIwvqtuDbBeFHtXGfM/LYMDmjtRJ0AAa7f254qw6TK7gAibYfHUA==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -4019,11 +4054,12 @@ packages:
     resolution: {integrity: sha512-2jtSwgyiRzybHRxrc2nKI+39wH3AwQgn+sogQ+q814gv8hIFwrcZbV07Ea9f8AmK0ufPVZUvvAG1uZJ+obV4Jw==}
     dev: true
 
-  /element-plus/1.2.0-beta.6_vue@3.2.26:
-    resolution: {integrity: sha512-8EdSIR/5/FHcSB8w1diAh+gJMHgxIvxuZoayY99k6taAR1QyEFHuPTgFccZLopJ1+iP4UEsZFz49l57qS08Utw==}
+  /element-plus/1.3.0-beta.1_vue@3.2.26:
+    resolution: {integrity: sha512-q3vMaKElPpuSTeIF7kuDmMOE+N1YVCCIG3fshXpz6qgjnxPbgZumVM0qGfhr8DTu9JxRbBoDok49dqtX/BWn3w==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
+      '@ctrl/tinycolor': 3.4.0
       '@element-plus/icons-vue': 0.2.4_vue@3.2.26
       '@popperjs/core': 2.11.0
       '@vueuse/core': 7.4.3_vue@3.2.26
@@ -10139,6 +10175,37 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
+  /unplugin-icons/0.13.0_rollup@2.62.0:
+    resolution: {integrity: sha512-CyAl0HV3bZUGT7ut9agpPRhEYXCvufr80Fh72yrkD57BVCTZ7ze10Rt63ZrvPXiJQpd+aI/Bizm2aqOf3WPSfg==}
+    peerDependencies:
+      '@svgr/core': ^5.5.0
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.4.0
+      '@iconify/utils': 1.0.20
+      debug: 4.3.3
+      kolorist: 1.5.1
+      local-pkg: 0.4.0
+      unplugin: 0.2.21_rollup@2.62.0
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
   /unplugin-vue-components/0.17.11_95e0d1fabfe6a3bc972c7b440477cc9b:
     resolution: {integrity: sha512-u5MQ0TbikszRelCt6EA/HskGtGkGLDxi7tQ4/4tcEPWkH3yXSZRJCOeLF5MSdxN1SiGjaJ0I9zeHjoZFC3FvRw==}
     engines: {node: '>=14'}
@@ -10170,6 +10237,55 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-vue-components/0.17.11_rollup@2.62.0+vue@3.2.26:
+    resolution: {integrity: sha512-u5MQ0TbikszRelCt6EA/HskGtGkGLDxi7tQ4/4tcEPWkH3yXSZRJCOeLF5MSdxN1SiGjaJ0I9zeHjoZFC3FvRw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@babel/traverse': ^7.15.4
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@babel/traverse':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.3.0
+      '@rollup/pluginutils': 4.1.1
+      chokidar: 3.5.2
+      debug: 4.3.3
+      fast-glob: 3.2.7
+      local-pkg: 0.4.0
+      magic-string: 0.25.7
+      minimatch: 3.0.4
+      resolve: 1.20.0
+      unplugin: 0.2.21_rollup@2.62.0
+      vue: 3.2.26
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
+  /unplugin/0.2.21_rollup@2.62.0:
+    resolution: {integrity: sha512-IJ15/L5XbhnV7J09Zjk0FT5HEkBjkXucWAXQWRsmEtUxmmxwh23yavrmDbCF6ZPxWiVB28+wnKIHePTRRpQPbQ==}
+    peerDependencies:
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      rollup: 2.62.0
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
   /unplugin/0.2.21_rollup@2.62.0+vite@2.7.10:
     resolution: {integrity: sha512-IJ15/L5XbhnV7J09Zjk0FT5HEkBjkXucWAXQWRsmEtUxmmxwh23yavrmDbCF6ZPxWiVB28+wnKIHePTRRpQPbQ==}
     peerDependencies: