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>