From 6dd3bbacc0f9f0cf97d24d91c02355773024e97b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 17 Apr 2024 12:12:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E3=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=9B=BE=E6=A0=87=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=9B=BE=E7=89=87=E9=93=BE=E6=8E=A5=E5=92=8Csvg?=
 =?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2=20#65?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugins/plugin-notes-data/src/shared/index.ts |  2 +-
 .../client/components/Flyout/MenuGroup.vue    |  5 ++-
 .../src/client/components/Flyout/MenuLink.vue |  3 +-
 theme/src/client/components/Flyout/index.vue  |  5 ++-
 .../client/components/Nav/NavBarMenuLink.vue  |  3 +-
 .../components/Nav/NavScreenMenuGroup.vue     |  5 ++-
 .../components/Nav/NavScreenMenuGroupLink.vue |  5 ++-
 .../Nav/NavScreenMenuGroupSection.vue         |  5 ++-
 .../components/Nav/NavScreenMenuLink.vue      |  5 ++-
 theme/src/client/components/SidebarItem.vue   |  8 +++-
 theme/src/client/components/VIcon.vue         | 43 +++++++++++++++++++
 theme/src/shared/options/navbar.ts            |  6 +--
 12 files changed, 76 insertions(+), 19 deletions(-)
 create mode 100644 theme/src/client/components/VIcon.vue

diff --git a/plugins/plugin-notes-data/src/shared/index.ts b/plugins/plugin-notes-data/src/shared/index.ts
index a197e814..2b7a3773 100644
--- a/plugins/plugin-notes-data/src/shared/index.ts
+++ b/plugins/plugin-notes-data/src/shared/index.ts
@@ -71,7 +71,7 @@ export interface NotesSidebarItem {
   /**
    * 侧边栏图标
    */
-  icon?: string
+  icon?: string | { svg: string }
 }
 
 export type NotesData = Record<string, NotesSidebarItem[]>
diff --git a/theme/src/client/components/Flyout/MenuGroup.vue b/theme/src/client/components/Flyout/MenuGroup.vue
index 15898aa4..bfb5981b 100644
--- a/theme/src/client/components/Flyout/MenuGroup.vue
+++ b/theme/src/client/components/Flyout/MenuGroup.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import VIcon from '../VIcon.vue'
 import MenuLink from './MenuLink.vue'
 
 defineProps<{
   text?: string
-  icon?: string
+  icon?: string | { svg: string }
   items: any[]
 }>()
 </script>
@@ -11,7 +12,7 @@ defineProps<{
 <template>
   <div class="menu-group">
     <p v-if="text" class="title">
-      <Icon v-if="icon" :name="icon" />
+      <VIcon v-if="icon" :name="icon" />
       <span v-text="text" />
     </p>
 
diff --git a/theme/src/client/components/Flyout/MenuLink.vue b/theme/src/client/components/Flyout/MenuLink.vue
index 30479b31..2b5a93a7 100644
--- a/theme/src/client/components/Flyout/MenuLink.vue
+++ b/theme/src/client/components/Flyout/MenuLink.vue
@@ -2,6 +2,7 @@
 import { usePageData } from 'vuepress/client'
 import { isActive } from '../../utils/index.js'
 import AutoLink from '../AutoLink.vue'
+import VIcon from '../VIcon.vue'
 
 defineProps<{
   item: any
@@ -22,7 +23,7 @@ const page = usePageData()
       }"
       :href="item.link"
     >
-      <Icon v-if="item.icon" :name="item.icon" />
+      <VIcon v-if="item.icon" :name="item.icon" />
       <i v-text="item.text" />
     </AutoLink>
   </div>
diff --git a/theme/src/client/components/Flyout/index.vue b/theme/src/client/components/Flyout/index.vue
index 4882638d..969f732e 100644
--- a/theme/src/client/components/Flyout/index.vue
+++ b/theme/src/client/components/Flyout/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useFlyout } from '../../composables/flyout.js'
+import VIcon from '../VIcon.vue'
 import VMenu from './VMenu.vue'
 
 defineProps<{
-  prefixIcon?: string
+  prefixIcon?: string | { svg: string }
   icon?: any
   button?: string
   label?: string
@@ -44,7 +45,7 @@ export default {
       @click="open = !open"
     >
       <span v-if="button || icon" class="text">
-        <Icon v-if="prefixIcon" :name="prefixIcon" />
+        <VIcon v-if="prefixIcon" :name="prefixIcon" />
         <span v-if="icon" class="option-icon" :class="[icon]" />
         <span v-if="button" v-html="button" />
         <span class="vpi-chevron-down text-icon" />
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue
index a82bc13f..57c4134e 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -3,6 +3,7 @@ import { usePageData } from 'vuepress/client'
 import type { NavItemWithLink } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import AutoLink from '../AutoLink.vue'
+import VIcon from '../VIcon.vue'
 
 defineProps<{
   item: NavItemWithLink
@@ -23,7 +24,7 @@ const page = usePageData()
     :href="item.link"
     :no-icon="true"
   >
-    <Icon v-if="item.icon" :name="item.icon" />
+    <VIcon v-if="item.icon" :name="item.icon" />
     <i v-text="item.text" />
   </AutoLink>
 </template>
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index 8f2d0139..d935b243 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import VIcon from '../VIcon.vue'
 import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
 import NavScreenMenuGroupSection from './NavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
-  icon?: string
+  icon?: string | { svg: string }
   items: any[]
 }>()
 
@@ -29,7 +30,7 @@ function toggle() {
       @click="toggle"
     >
       <span class="button-text">
-        <Icon v-if="icon" :name="icon" />
+        <VIcon v-if="icon" :name="icon" />
         <i v-text="text" />
       </span>
       <span class="vpi-plus button-icon" />
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
index 88647dc2..c92e18af 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 import AutoLink from '../AutoLink.vue'
+import VIcon from '../VIcon.vue'
 
 defineProps<{
-  icon?: string
+  icon?: string | { svg: string }
   text: string
   link: string
 }>()
@@ -17,7 +18,7 @@ const closeScreen = inject('close-screen') as () => void
     :href="link"
     @click="closeScreen"
   >
-    <Icon v-if="icon" :name="icon" />
+    <VIcon v-if="icon" :name="icon" />
     <i v-text="text" />
   </AutoLink>
 </template>
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
index 59ee61d8..eb43521d 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { NavItemWithLink } from '../../../shared/index.js'
+import VIcon from '../VIcon.vue'
 import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
 
 defineProps<{
-  icon?: string
+  icon?: string | { svg: string }
   text?: string
   items: NavItemWithLink[]
 }>()
@@ -12,7 +13,7 @@ defineProps<{
 <template>
   <div class="nav-screen-menu-group-section">
     <p v-if="text" class="title">
-      <Icon v-if="icon" :name="icon" />
+      <VIcon v-if="icon" :name="icon" />
       {{ text }}
     </p>
     <NavScreenMenuGroupLink
diff --git a/theme/src/client/components/Nav/NavScreenMenuLink.vue b/theme/src/client/components/Nav/NavScreenMenuLink.vue
index 876b8ea9..9be3741b 100644
--- a/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuLink.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 import AutoLink from '../AutoLink.vue'
+import VIcon from '../VIcon.vue'
 
 defineProps<{
   text: string
   link: string
-  icon?: string
+  icon?: string | { svg: string }
 }>()
 
 const closeScreen = inject('close-screen') as () => void
@@ -13,7 +14,7 @@ const closeScreen = inject('close-screen') as () => void
 
 <template>
   <AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
-    <Icon v-if="icon" :name="icon" />
+    <VIcon v-if="icon" :name="icon" />
     <i v-text="text" />
   </AutoLink>
 </template>
diff --git a/theme/src/client/components/SidebarItem.vue b/theme/src/client/components/SidebarItem.vue
index 6c65a8a6..075dd2ad 100644
--- a/theme/src/client/components/SidebarItem.vue
+++ b/theme/src/client/components/SidebarItem.vue
@@ -3,6 +3,7 @@ import type { NotesSidebarItem } from '@vuepress-plume/plugin-notes-data'
 import { computed } from 'vue'
 import { useSidebarControl } from '../composables/sidebar.js'
 import AutoLink from './AutoLink.vue'
+import VIcon from './VIcon.vue'
 
 const props = defineProps<{
   item: NotesSidebarItem
@@ -68,7 +69,7 @@ function onCaretClick() {
     >
       <div class="indicator" />
 
-      <Icon v-if="item.icon" :name="item.icon" />
+      <VIcon v-if="item.icon" :name="item.icon" />
 
       <AutoLink
         v-if="item.link"
@@ -222,6 +223,11 @@ function onCaretClick() {
   transition: color var(--t-color);
 }
 
+.item :deep(.vp__img) {
+  height: 0.9em;
+  margin: 0 0.25rem 0 0;
+}
+
 .item:hover .caret {
   color: var(--vp-c-text-2);
 }
diff --git a/theme/src/client/components/VIcon.vue b/theme/src/client/components/VIcon.vue
new file mode 100644
index 00000000..78958fe2
--- /dev/null
+++ b/theme/src/client/components/VIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isLinkHttp } from 'vuepress/shared'
+import { withBase } from 'vuepress/client'
+
+const props = defineProps<{
+  name: string | { svg: string }
+}>()
+
+const isLink = computed(() =>
+  typeof props.name === 'string' && (isLinkHttp(props.name) || props.name[0] === '/'),
+)
+const isSvg = computed(() => typeof props.name === 'object' && !!props.name.svg)
+
+const svg = computed(() => {
+  if (isSvg.value)
+    return (props.name as { svg: string }).svg
+
+  return ''
+})
+const link = computed(() => {
+  if (isLink.value) {
+    const link = props.name as string
+    return isLinkHttp(link) ? link : withBase(link)
+  }
+  return ''
+})
+</script>
+
+<template>
+  <img v-if="isLink" class="vp__img" :src="link" alt="">
+  <span v-else-if="isSvg" class="vp-iconify" v-html="svg" />
+  <Icon v-else :name="name" />
+</template>
+
+<style scoped>
+.vp__img {
+  display: inline-block;
+  height: 1em;
+  margin: 0.3em;
+  vertical-align: middle;
+}
+</style>
diff --git a/theme/src/shared/options/navbar.ts b/theme/src/shared/options/navbar.ts
index 192a7a89..3f547f5f 100644
--- a/theme/src/shared/options/navbar.ts
+++ b/theme/src/shared/options/navbar.ts
@@ -3,7 +3,7 @@ export type NavItem = NavItemWithLink | NavItemWithChildren
 export interface NavItemWithLink {
   text: string
   link: string
-  icon?: string
+  icon?: string | { svg: string }
 
   /**
    * `activeMatch` is expected to be a regex string. We can't use actual
@@ -14,13 +14,13 @@ export interface NavItemWithLink {
 
 export interface NavItemChildren {
   text?: string
-  icon?: string
+  icon?: string | { svg: string }
   items: NavItemWithLink[]
 }
 
 export interface NavItemWithChildren {
   text?: string
-  icon?: string
+  icon?: string | { svg: string }
   items: (NavItemChildren | NavItemWithLink)[]
 
   /**