Add the official social marks to the footer links

The marks come from the simple-icons package (CC0) and are inlined at build
time — the earlier hand-drawn glyphs were wrong, the X mark in particular is
not a plain cross. Importing the three SVGs individually rather than the
package index keeps the other icons out of the bundle: 10 kB, not 5 MB.

Rendered monochrome in the surrounding text colour, with the text label kept
next to each one.

frontend/app/components/SocialIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// The official brand marks, inlined at build time from the simple-icons
+// package (CC0) rather than redrawn here. Importing the three files directly
+// keeps the other ~3000 icons out of the bundle.
+import facebookMark from 'simple-icons/icons/facebook.svg?raw'
+import instagramMark from 'simple-icons/icons/instagram.svg?raw'
+import xMark from 'simple-icons/icons/x.svg?raw'
+
+const MARKS = {
+  X: xMark,
+  Instagram: instagramMark,
+  Facebook: facebookMark,
+} as const
+
+const props = defineProps<{ name: keyof typeof MARKS }>()
+
+const mark = computed(() => MARKS[props.name])
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -- build-time asset, not user input -->
+  <span class="icon" aria-hidden="true" v-html="mark" />
+</template>
+
+<style scoped>
+.icon {
+  flex: none;
+  display: inline-flex;
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+</style>

frontend/app/layouts/default.vue

@@ -77,7 +77,10 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
           <p class="kicker">{{ $t('site.follow') }}</p>
           <ul>
             <li v-for="social in SOCIAL_LINKS" :key="social.name">
-              <a :href="social.url" target="_blank" rel="noopener me">{{ social.name }}</a>
+              <a class="social" :href="social.url" target="_blank" rel="noopener me">
+                <SocialIcon :name="social.name" />
+                <span>{{ social.name }}</span>
+              </a>
             </li>
           </ul>
         </nav>
@@ -224,6 +227,22 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   text-underline-offset: 0.2em;
 }
 
+.social {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+/* Keep the underline on the label, not stretched across the icon. */
+.social:hover {
+  text-decoration: none;
+}
+
+.social:hover span {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
 .copyright {
   padding-top: 1.75rem;
   text-align: center;