Using span instead of div

vuejs · Apr 27, 2024 · c6fa8ac · c6fa8ac
1 parent ee7fa47
commit c6fa8ac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -39,27 +39,27 @@ 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"
         :alt="startIcon.alt"
         :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"
         :alt="endIcon.alt"
         :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>