From a78426fa6e0237c3fc3bf48cafab88e4e0dd17e2 Mon Sep 17 00:00:00 2001
From: GweesinChan <gweesin2000@gmail.com>
Date: Tue, 30 Apr 2024 21:45:36 +0800
Subject: [PATCH] feat: support icon by svg tag

---
 .../theme-default/components/VPImage.vue      | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/client/theme-default/components/VPImage.vue b/src/client/theme-default/components/VPImage.vue
index 8a2f5131..649d4133 100644
--- a/src/client/theme-default/components/VPImage.vue
+++ b/src/client/theme-default/components/VPImage.vue
@@ -1,24 +1,53 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
 import { withBase } from 'vitepress'
+import { computed, ref, useAttrs, watch } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   image: DefaultTheme.ThemeableImage
   alt?: string
 }>()
 
+const $attrs = useAttrs()
+const elAttrs = computed(() => typeof props.image === 'string' ? $attrs : { ...props.image, ...$attrs })
+
+const computedSrc = computed(() => withBase(typeof props.image === 'string' ? props.image : props.image.src))
+
+const svgWrapperEl = ref<HTMLElement | null>(null)
+
+watch(computedSrc, async () => {
+  if (!computedSrc.value.endsWith('.svg')) {
+    return
+  }
+
+  fetch(computedSrc.value)
+    .then((res) => res.text())
+    .then((data) => {
+      svgWrapperEl.value!.innerHTML = data
+      const svgEl = svgWrapperEl.value!.querySelector('svg')
+
+      // iterate over all attributes and set them on the svg element
+      for (const [key, value] of Object.entries(elAttrs.value)) {
+        svgEl!.setAttribute(key, value as string)
+      }
+    })
+}, { immediate: true })
+
 defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
   <template v-if="image">
-    <img
-      v-if="typeof image === 'string' || 'src' in image"
-      class="VPImage"
-      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
-      :src="withBase(typeof image === 'string' ? image : image.src)"
-      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
-    />
+    <template v-if="typeof image === 'string' || 'src' in image">
+      <div v-if="computedSrc.endsWith('.svg')" ref="svgWrapperEl" class="VPImage" />
+      <img
+        v-else
+        class="VPImage"
+        v-bind="elAttrs"
+        :src="computedSrc"
+        :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+      />
+    </template>
     <template v-else>
       <VPImage
         class="dark"