From dac6c723b016a9bafb99788133e0be1cc5d51f93 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 29 Aug 2026 01:06:40 +0530
Subject: [PATCH] refactor(theme): render VPSocialLink through VPIcon

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../theme-default/components/VPIcon.vue       |  5 ----
 .../theme-default/components/VPSocialLink.vue | 28 +++++++------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/client/theme-default/components/VPIcon.vue b/src/client/theme-default/components/VPIcon.vue
index 57cd1dcd..0e7983e8 100644
--- a/src/client/theme-default/components/VPIcon.vue
+++ b/src/client/theme-default/components/VPIcon.vue
@@ -3,11 +3,6 @@ import { useIcon } from 'vitepress'
 import { useTemplateRef } from 'vue'
 
 const props = defineProps<{
-  /**
-   * A fully qualified `collection:name` for any `@iconify-json/*`
-   * collection in the project's dependencies (e.g. `simple-icons:github`,
-   * `lucide:rocket`), or a raw `{ svg }` string.
-   */
   icon: string | { svg: string }
 }>()
 
diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue
index d77a2a1a..420ebca8 100644
--- a/src/client/theme-default/components/VPSocialLink.vue
+++ b/src/client/theme-default/components/VPSocialLink.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useIcon } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
-import { useTemplateRef } from 'vue'
+import { computed } from 'vue'
 
 import { isExternal } from '../../shared'
+import VPIcon from './VPIcon.vue'
 
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
@@ -13,16 +13,10 @@ const props = defineProps<{
   me: boolean
 }>()
 
-const el = useTemplateRef('el')
-
-// socialLinks accepts bare simple-icons names; everything downstream
-// speaks fully qualified `collection:name`
-const iconClass = useIcon(
-  () =>
-    typeof props.icon === 'string' && !props.icon.includes(':')
-      ? `simple-icons:${props.icon}`
-      : props.icon,
-  el
+const qualifiedIcon = computed(() =>
+  typeof props.icon === 'string' && !props.icon.includes(':')
+    ? `simple-icons:${props.icon}`
+    : props.icon
 )
 </script>
 
@@ -34,8 +28,7 @@ const iconClass = useIcon(
     :target="target ?? (isExternal(link) ? '_blank' : undefined)"
     :rel="me ? 'me noopener' : 'noopener'"
   >
-    <span v-if="typeof icon === 'object'" v-html="icon.svg"></span>
-    <span v-else ref="el" :class="iconClass"></span>
+    <VPIcon :icon="qualifiedIcon" />
   </a>
 </template>
 
@@ -58,12 +51,11 @@ const iconClass = useIcon(
 .VPSocialLink > :deep(span) {
   /* keeps a nested custom svg centered instead of baseline-aligned */
   display: flex;
-}
-
-.VPSocialLink :deep(svg),
-.VPSocialLink > :deep([class^='vpi-']) {
   width: 1.25rem;
   height: 1.25rem;
+}
+
+.VPSocialLink :deep(svg) {
   fill: currentColor;
 }
 </style>