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/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;