From c6fa8ac1c6aaadafd7d09e69698b4fdbbc16a114 Mon Sep 17 00:00:00 2001
From: Timothy Lau <timothy-lau@outlook.com>
Date: Sat, 27 Apr 2024 13:27:15 +0800
Subject: [PATCH] Using span instead of div

---
 docs/index.md                                    |  3 ++-
 src/client/theme-default/components/VPButton.vue | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 3c7faece1d25..395f16083b3b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,7 +13,7 @@ hero:
       text: What is VitePress?
       link: /guide/what-is-vitepress
       startIcon: 
-        src: /public/vitepress-logo-mini.svg
+        src: /vitepress-logo-mini.svg
         width: 18
         height: 18
       endIcon: 
@@ -23,6 +23,7 @@ hero:
     - theme: alt
       text: GitHub
       link: https://github.com/vuejs/vitepress
+      startIcon: <span class="vpi-social-github" />
       endIcon: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"/></svg>
   image:
     src: /vitepress-logo-large.webp
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 55d63209403f..b4c89a8b4fb8 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -39,7 +39,7 @@ const component = computed(() => {
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
-    <div class="start-icon" v-if="startIcon">
+    <span class="start-icon" v-if="startIcon">
       <VPImage
         v-if="typeof startIcon === 'object'"
         :image="startIcon"
@@ -47,10 +47,10 @@ const component = computed(() => {
         :height="startIcon.height || 32"
         :width="startIcon.width || 32"
       />
-      <div v-else-if="startIcon" class="icon" v-html="startIcon"></div>
-    </div>
+      <span v-else-if="startIcon" class="icon" v-html="startIcon"></span>
+    </span>
     <span>{{ text }}</span>
-    <div class="end-icon" v-if="endIcon">
+    <span class="end-icon" v-if="endIcon">
       <VPImage
         v-if="typeof endIcon === 'object'"
         :image="endIcon"
@@ -58,8 +58,8 @@ const component = computed(() => {
         :height="endIcon.height || 32"
         :width="endIcon.width || 32"
       />
-      <div v-else-if="endIcon" class="icon" v-html="endIcon"></div>
-    </div>
+      <span v-else-if="endIcon" class="icon" v-html="endIcon"></span>
+    </span>
   </component>
 </template>