chore: refactor

docs/.vitepress/config/shared.ts

@@ -44,9 +44,25 @@ export const shared = defineConfig({
     logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+      {
+        icon: {
+          id: 'github',
+          symbol: `<symbol id="github" viewBox="0 0 24 24">
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+  </symbol>`
+        },
+        link: 'https://github.com/vuejs/vitepress'
+      },
+      {
+        icon: {
+          svg: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>`
+        },
+        link: 'https://github.com/vuejs/vitepress'
+      }
     ],
 
+    enableSocialLinksSVGSprite: true,
+
     search: {
       provider: 'algolia',
       options: {

src/client/shim.d.ts

@@ -4,6 +4,7 @@ declare const __ALGOLIA__: boolean
 declare const __CARBON__: boolean
 declare const __VUE_PROD_DEVTOOLS__: boolean
 declare const __ASSETS_DIR__: string
+declare const __SOCIAL_SVG_SPRITE_ICONS__: boolean
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

src/client/theme-default/components/VPSVGSpriteIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import { computed } from 'vue'
+
+interface Props {
+  icon: string
+  sprite?: 'vitepress' | 'social' | 'local-search'
+  title?: string
+  desc?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sprite: 'vitepress'
+})
+
+const { site } = useData()
+
+const useSprite = computed(() => {
+  switch (props.sprite) {
+    case 'social':
+      return 'vp-social-icons-sprite.svg'
+    case 'local-search':
+      return 'vp-local-search-icons-sprite.svg'
+    case 'vitepress':
+    default:
+      return 'vp-icons-sprite.svg'
+  }
+})
+const href = computed(() => `${site.value.base}${useSprite.value}#${props.icon}`)
+</script>
+
+<template>
+  <svg>
+    <title v-if="title">{{ title }}</title>
+    <desc v-if="desc">{{ desc }}</desc>
+    <use :href="href"></use>
+  </svg>
+</template>

src/client/theme-default/components/VPSocialLink.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
-import { icons } from '../support/socialIcons'
 
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
@@ -9,21 +8,62 @@ const props = defineProps<{
   ariaLabel?: string
 }>()
 
+const svgSpriteRegex = __SOCIAL_SVG_SPRITE_ICONS__
+  ? /\.\/sprite-social-icons\/VP(.*)Icon\.vue/
+  : /\.\/social-icons\/VP(.*)Icon\.vue/
+
+const icons = Object.entries(__SOCIAL_SVG_SPRITE_ICONS__
+    ?
+    import.meta.glob('./sprite-social-icons/*.vue', {
+      eager: true,
+      import: 'default'
+    })
+    : import.meta.glob('./social-icons/*.vue', {
+      eager: true,
+      import: 'default'
+    })
+).reduce(
+    (acc, [path, component]) => {
+      const name = path
+          .match(svgSpriteRegex)![1]
+          .toLowerCase()
+      acc[name] = component
+      return acc
+    },
+    {} as Record<string, any>
+)
+
 const svg = computed(() => {
-  if (typeof props.icon === 'object') return props.icon.svg
+  if (__SOCIAL_SVG_SPRITE_ICONS__) {
+    if (typeof props.icon === 'object' && 'id' in props.icon) return 'id' in props.icon ? icons[props.icon.id] : undefined
+  }
+
+  if (typeof props.icon === 'object') return 'svg' in props.icon ? { svg: props.icon.svg } : undefined
+
   return icons[props.icon]
 })
 </script>
 
 <template>
   <a
+    v-if="typeof svg === 'object' && svg.svg"
     class="VPSocialLink no-icon"
     :href="link"
     :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
     target="_blank"
     rel="noopener"
-    v-html="svg"
+    v-html="svg.svg"
+  >
+  </a>
+  <a
+    v-else
+    class="VPSocialLink"
+    :href="link"
+    :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
+    target="_blank"
+    rel="noopener"
   >
+    <component v-if="svg" :is="svg" />
   </a>
 </template>
 

src/client/theme-default/components/icons/VPIconAlignJustify.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#AlignJustify`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="AlignJustify" />
 </template>

src/client/theme-default/components/icons/VPIconAlignLeft.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#AlignLeft`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="AlignLeft" />
 </template>

src/client/theme-default/components/icons/VPIconAlignRight.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#AlignRight`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="AlignRight" />
 </template>

src/client/theme-default/components/icons/VPIconArrowLeft.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ArrowLeft`"></use>
-  </svg>
+  <VPIcon icon="ArrowLeft" />
 </template>

src/client/theme-default/components/icons/VPIconArrowRight.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ArrowRight`"></use>
-  </svg>
+  <VPIcon icon="ArrowRight" />
 </template>

src/client/theme-default/components/icons/VPIconChevronDown.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ChevronDown`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="ChevronDown" />
 </template>

src/client/theme-default/components/icons/VPIconChevronLeft.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ChevronLeft`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="ChevronLeft" />
 </template>

src/client/theme-default/components/icons/VPIconChevronRight.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ChevronRight`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="ChevronRight" />
 </template>

src/client/theme-default/components/icons/VPIconChevronUp.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#ChevronUp`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="ChevronUp" />
 </template>

src/client/theme-default/components/icons/VPIconEdit.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Edit`"></use>
-  </svg>
+  <VPIcon icon="Edit" />
 </template>

src/client/theme-default/components/icons/VPIconHeart.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Heart`"></use>
-  </svg>
+  <VPIcon icon="Heart" />
 </template>

src/client/theme-default/components/icons/VPIconLanguages.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Languages`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="Languages" />
 </template>

src/client/theme-default/components/icons/VPIconMinus.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Minus`"></use>
-  </svg>
+  <VPIcon icon="Minus" />
 </template>

src/client/theme-default/components/icons/VPIconMinusSquare.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#MinusSquare`"></use>
-  </svg>
+  <VPIcon icon="MinusSquare" />
 </template>

src/client/theme-default/components/icons/VPIconMoon.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
+
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Moon`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="Moon" />
 </template>

src/client/theme-default/components/icons/VPIconMoreHorizontal.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-  import { useData } from '../../composables/data'
-
-  const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#MoreHorizontal`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="MoreHorizontal" />
 </template>
 

src/client/theme-default/components/icons/VPIconPlus.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Plus`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="Plus" />
 </template>
 

src/client/theme-default/components/icons/VPIconPlusSquare.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
 
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#PlusSquare`"></use>
-  </svg>
+  <VPIcon icon="PlusSquare" />
 </template>
 

src/client/theme-default/components/icons/VPIconSun.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useData } from '../../composables/data'
-
-const { site } = useData()
+import VPIcon from '../VPSVGSpriteIcon.vue';
 </script>
+
 <template>
-  <svg>
-    <use :href="`${site.base}vp-icons-sprite.svg#Sun`"></use>
-  </svg>
+  <VPIcon aria-hidden="true" focusable="false" icon="Sun" />
 </template>

src/client/theme-default/components/social-icons/VPDiscordIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPFacebookIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPGitHubIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPInstagramIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPLinkedInIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPMastodonIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPNpmIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPSlackIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPTwitterIcon.vue

@@ -0,0 +1,7 @@
+
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPXIcon.vue

@@ -0,0 +1,7 @@
+
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+</template>

src/client/theme-default/components/social-icons/VPYouTubeIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+</template>
+

src/client/theme-default/components/sprite-social-icons/VPDiscordIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="discord" title="Discord" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPFacebookIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="facebook" title="Facebook" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPGitHubIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="github" title="GitHub" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPInstagramIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="instagram" title="Instagram" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPLinkedInIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="linkedin" title="LinkedIn" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPMastodonIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="mastodon" title="Mastodon" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPNpmIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="npm" title="npm" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPSlackIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="slack" title="Slack" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPTwitterIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="twitter" title="Twitter" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPXIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="x" title="X" sprite="social" />
+</template>

src/client/theme-default/components/sprite-social-icons/VPYouTubeIcon.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import VPIcon from '../VPSVGSpriteIcon.vue';
+</script>
+
+<template>
+  <VPIcon role="img" icon="youtube" title="YouTube" sprite="social" />
+</template>

src/client/theme-default/support/socialIcons.ts

@@ -1,23 +0,0 @@
-// used under CC0 1.0 from https://simpleicons.org/
-export const icons = {
-  discord:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>',
-  facebook:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',
-  github:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>',
-  instagram:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>',
-  linkedin:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',
-  mastodon:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>',
-  npm: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>',
-  slack:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>',
-  twitter:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>',
-  x: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>',
-  youtube:
-    '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'
-} as const

src/node/plugin.ts

@@ -153,7 +153,9 @@ export async function createVitePressPlugin(
             !!site.themeConfig?.algolia, // legacy
           __CARBON__: !!site.themeConfig?.carbonAds,
           __ASSETS_DIR__: JSON.stringify(siteConfig.assetsDir),
-          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: !!process.env.DEBUG
+          __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: !!process.env.DEBUG,
+          __SOCIAL_SVG_SPRITE_ICONS__:
+            site.themeConfig?.enableSocialLinksSVGSprite === true
         },
         optimizeDeps: {
           // force include vue to avoid duplicated copies when linked + optimized
@@ -445,7 +447,7 @@ export async function createVitePressPlugin(
     ...(userViteConfig?.plugins || []),
     await localSearchPlugin(siteConfig),
     staticDataPlugin,
-    svgSpritePlugin,
+    svgSpritePlugin(siteConfig),
     await dynamicRoutesPlugin(siteConfig)
   ]
 }

src/node/plugins/svgSpritePlugin.ts

@@ -1,20 +1,66 @@
 import type { Plugin } from 'vite'
+import type { SiteConfig } from '../siteConfig'
+import type { DefaultTheme } from '../index'
+
+export function svgSpritePlugin(siteConfig: SiteConfig) {
+  let useSvgSprites: Record<string, string> = {}
+  return {
+    name: 'vitepress:svg-sprite',
+    enforce: 'pre',
+    configResolved() {
+      useSvgSprites = prepareSvgSprites(useSvgSprites, siteConfig)
+    },
+    generateBundle(_options, bundle) {
+      Object.entries(useSvgSprites).forEach(([fileName, source]) => {
+        bundle[fileName] = {
+          type: 'asset',
+          name: fileName,
+          source,
+          fileName,
+          needsCodeReference: true
+        }
+      })
+    },
+    configureServer(server) {
+      const base = siteConfig.site.base ?? server.config.base ?? '/'
+      server.middlewares.use((req, res, next) => {
+        const url = req.url
+        if (!url) {
+          return next()
+        }
+        const filename = new URL(url, 'http://localhost').pathname.replace(
+          base,
+          ''
+        )
+        const sprite = useSvgSprites[filename]
+        if (!sprite) {
+          return next()
+        }
+
+        res.setHeader('Content-Type', 'image/svg+xml')
+        res.statusCode = 200
+        res.write(sprite, 'utf-8')
+        res.end()
+      })
+    }
+  } satisfies Plugin
+}
 
 const svgSprite = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
-  <symbol id="AlignJustify" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="AlignJustify" viewBox="0 0 24 24">
     <path d="M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
     <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
     <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
     <path d="M21,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
   </symbol>
-  <symbol id="AlignLeft" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="AlignLeft" viewBox="0 0 24 24">
     <path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z" />
     <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
     <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
     <path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z" />
   </symbol>
-  <symbol id="AlignRight" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="AlignRight" viewBox="0 0 24 24">
     <path d="M21,11H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
     <path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z" />
     <path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z" />
@@ -26,98 +72,145 @@ const svgSprite = `<?xml version="1.0" encoding="UTF-8"?>
   <symbol id="ArrowRight" viewBox="0 0 24 24">
     <path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"/>
   </symbol>
-  <symbol id="ChevronDown" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="ChevronDown" viewBox="0 0 24 24">
     <path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z" />
   </symbol>
-  <symbol id="ChevronLeft" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="ChevronLeft" viewBox="0 0 24 24">
     <path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z" />
   </symbol>
-  <symbol id="ChevronRight" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="ChevronRight" viewBox="0 0 24 24">
     <path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z" />
   </symbol>
-  <symbol id="ChevronUp" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="ChevronUp" viewBox="0 0 24 24">
     <path d="M18,16c-0.3,0-0.5-0.1-0.7-0.3L12,10.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4C18.5,15.9,18.3,16,18,16z" />
   </symbol>
   <symbol id="Edit" viewBox="0 0 24 24">
-    <path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z" /><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z" />
+    <path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z" />
+    <path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z" />
   </symbol>
   <symbol id="Heart" viewBox="0 0 24 24">
     <path d="M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2zM7,4C5.9,4,4.7,4.4,3.9,5.3c-1.8,1.8-1.8,4.6,0,6.4l8.1,8.1l8.1-8.1c0.9-0.9,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2l0,0C19.3,4.5,18.2,4,17,4c0,0,0,0,0,0c-1.2,0-2.3,0.5-3.2,1.3c0,0,0,0,0,0l-1.1,1.1c-0.4,0.4-1,0.4-1.4,0l-1.1-1.1C9.4,4.4,8.2,4,7,4z" />
   </symbol>
-  <symbol id="Languages" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "  class="css-c4d79v"></path>
+  <symbol id="Languages" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " />
   </symbol>
   <symbol id="Minus" viewBox="0 0 24 24">
     <path d="M22,13H2a1,1,0,0,1,0-2H22a1,1,0,0,1,0,2Z" />
   </symbol>
   <symbol id="MinusSquare" viewBox="0 0 24 24">
-    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" /><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
   </symbol>
-  <symbol id="Moon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="Moon" viewBox="0 0 24 24">
     <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
   </symbol>
-  <symbol id="MoreHorizontal" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <circle cx="12" cy="12" r="2" /><circle cx="19" cy="12" r="2" /><circle cx="5" cy="12" r="2" />
+  <symbol id="MoreHorizontal" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="19" cy="12" r="2" />
+    <circle cx="5" cy="12" r="2" />
   </symbol>
-  <symbol id="Plus" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+  <symbol id="Plus" viewBox="0 0 24 24">
     <path d="M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z" />
   </symbol>
   <symbol id="PlusSquare" viewBox="0 0 24 24">
-    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" /><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
-  </symbol>
-  <symbol id="Sun" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" /><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" /><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" /><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" /><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" /><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" /><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" /><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" /><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </symbol>
+  <symbol id="Sun" viewBox="0 0 24 24">
+    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
   </symbol>
 </svg>
 `
 
-// TODO: include social icons?
-const socialSvgSprite = `<?xml version="1.0" encoding="UTF-8"?>
+const localSearchSvgSprite = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
 </svg>
 `
 
-const svgSpriteMap: Record<string, string> = {
-  'vp-icons-sprite.svg': svgSprite,
-  'vp-icons-social-sprite.svg': socialSvgSprite
+const socialSvgSpriteSymbols = {
+  discord: `<symbol id="discord" viewBox="0 0 24 24">
+    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
+  </symbol>`,
+  facebook: `<symbol id="facebook" viewBox="0 0 24 24">
+    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+  </symbol>`,
+  github: `<symbol id="github" viewBox="0 0 24 24">
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+  </symbol>`,
+  instagram: `<symbol id="instagram" viewBox="0 0 24 24">
+    <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
+  </symbol>`,
+  linkedin: `<symbol id="linkedin" viewBox="0 0 24 24">
+    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>    
+  </symbol>`,
+  mastodon: `<symbol id="mastodon" viewBox="0 0 24 24">
+    <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+  </symbol>`,
+  npm: `<symbol id="npm" viewBox="0 0 24 24">
+    <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/>
+  </symbol>`,
+  slack: `<symbol id="slack" viewBox="0 0 24 24">
+    <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
+  </symbol>`,
+  twitter: `<symbol id="twitter" viewBox="0 0 24 24">
+    <path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/>
+  </symbol>`,
+  x: `<symbol id="x" viewBox="0 0 24 24">
+    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+  </symbol>`,
+  youtube: `<symbol id="youtube" viewBox="0 0 24 24">
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+  </symbol>`
 }
 
-export const svgSpritePlugin: Plugin = {
-  name: 'vitepress:svg-sprite',
-  enforce: 'pre',
-  generateBundle(_options, bundle) {
-    Object.entries(svgSpriteMap).forEach(([fileName, source]) => {
-      bundle[fileName] = {
-        type: 'asset',
-        name: fileName,
-        source,
-        fileName,
-        needsCodeReference: true
+function prepareSvgSprites(
+  sprites: Record<string, string>,
+  siteConfig: SiteConfig
+) {
+  sprites['vp-icons-sprite.svg'] = svgSprite
+  if (siteConfig.site.themeConfig?.enableSocialLinksSVGSprite) {
+    const socialLinks: DefaultTheme.SocialLink[] | undefined =
+      siteConfig.site.themeConfig.socialLinks
+    if (socialLinks?.length) {
+      const entries = Object.values(
+        socialLinks.reduce(
+          (sprite, l) => {
+            if (l.icon) {
+              if (typeof l.icon !== 'object') {
+                if (l.icon in socialSvgSpriteSymbols) {
+                  sprite[l.icon] = socialSvgSpriteSymbols[l.icon]
                 }
-    })
-  },
-  configureServer(server) {
-    // TODO: review base path => SiteConfig
-    const base = server.config.base ?? '/'
-    server.middlewares.use((req, res, next) => {
-      const url = req.url
-      if (!url) {
-        return next()
+              } else if ('id' in l.icon && 'symbol' in l.icon) {
+                sprite[l.icon.id] = l.icon.symbol
+                // we don't need the symbol in the site configuration
+                l.icon.symbol = ''
               }
-      const filename = new URL(url, 'http://localhost').pathname.replace(
-        base,
-        ''
+            }
+
+            return sprite
+          },
+          {} as Record<string, string>
         )
-      const sprite = svgSpriteMap[filename]
-      if (!sprite) {
-        return next()
+      )
+      entries.unshift(`<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">`)
+      entries.push('</svg>')
+      sprites['vp-social-icons-sprite.svg'] = entries.join('')
+    }
   }
 
-      res.setHeader('Content-Type', 'image/svg+xml')
-      res.statusCode = 200
-      res.write(sprite, 'utf-8')
-      res.end()
-    })
+  if (siteConfig.site.themeConfig?.search?.provider === 'local') {
+    sprites['vp-local-search-icons-sprite.svg'] = localSearchSvgSprite
   }
+
+  return sprites
 }

types/default-theme.d.ts

@@ -89,6 +89,19 @@ export namespace DefaultTheme {
      */
     socialLinks?: SocialLink[]
 
+    /**
+     * Should VitePress generate and use SVG Sprite to render SVG social links?.
+     *
+     * To enable this feature, you need to provide `{ sprite: string; symbol: string }` in `socialLinks` entries if you're using custom `svg`:
+     * - the symbol is the svg content: replace svg with symbol tag: `<svg...><content></svg>` => `<symbol><content></symbol>`
+     * - remove any xmlns and role attributes
+     * - include id attribute, must match the sprite value
+     * - remove title and desc tags if present
+     *
+     * @default false
+     */
+    enableSocialLinksSVGSprite?: boolean
+
     /**
      * The footer configuration.
      */
@@ -327,6 +340,11 @@ export namespace DefaultTheme {
     ariaLabel?: string
   }
 
+  export interface SpriteSvg {
+    id: string
+    symbol: string
+  }
+
   export type SocialLinkIcon =
     | 'discord'
     | 'facebook'
@@ -340,6 +358,7 @@ export namespace DefaultTheme {
     | 'x'
     | 'youtube'
     | { svg: string }
+    | SpriteSvg
 
   // footer --------------------------------------------------------------------