refactor(theme): render VPSocialLink through VPIcon

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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 }
 }>()
 

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(
-  () =>
+const qualifiedIcon = computed(() =>
   typeof props.icon === 'string' && !props.icon.includes(':')
     ? `simple-icons:${props.icon}`
-      : props.icon,
-  el
+    : 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>