perf: replace Font Awesome with inline SVG icons

partials/head.html

@@ -9,18 +9,13 @@
   <link rel="apple-touch-icon" href="/images/favicon.png" />
 
   <!--
-    Resource hints. jsdelivr gets a full preconnect because it serves two
-    render-blocking stylesheets below, so its connection is on the critical
-    path. Deliberately no crossorigin: the stylesheet requests are not CORS,
-    and a crossorigin preconnect would open a connection they cannot reuse.
-
-    The rest only get dns-prefetch. They are either deferred (analytics),
-    fetched after mount (the GitHub/npm stats in Header.tsx, the stars
-    iframe), or may never be used at all (Algolia, which requests only once
-    someone types in the search box), so spending a connection up front
-    would be wasteful.
+    Resource hints. Nothing here is on the critical path any more now that no
+    stylesheet is loaded from a third party, so there is no preconnect: these
+    origins are all either deferred (analytics), fetched after mount (the
+    GitHub/npm stats in Header.tsx, the stars iframe), or may never be used at
+    all (Algolia, which requests only once someone types in the search box).
+    dns-prefetch covers the DNS lookup without spending a connection up front.
   -->
-  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
   <link rel="dns-prefetch" href="https://38BPOKYOZ2-dsn.algolia.net" />
   <link rel="dns-prefetch" href="https://analytics.limonte.dev" />
   <link rel="dns-prefetch" href="https://api.github.com" />
@@ -51,9 +46,6 @@
 
   <link rel="stylesheet" href="/styles/styles.scss" />
 
-  <!-- Font Awesome icons -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css" />
-
   <script
     defer
     src="https://analytics.limonte.dev/script.js"

src/components/Examples.tsx

@@ -1,5 +1,6 @@
 import { examples } from '../examples'
 import { CodeExample } from './CodeExample'
+import { IconExternalLink } from './UiIcons'
 
 export function Examples() {
   return (
@@ -132,7 +133,7 @@ export function Examples() {
                 tabIndex={-1}
                 className="nowrap"
               >
-                Animate.css <i className="fa fa-external-link"></i>
+                Animate.css <IconExternalLink />
               </a>
             </p>
             <button

src/components/Installation.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { CodeExample } from './CodeExample'
 import { CodeWithCopy } from './CodeWithCopy'
+import { IconExternalLink } from './UiIcons'
 
 export function Installation() {
   return (
@@ -15,7 +16,7 @@ export function Installation() {
         <p>
           Or grab from{' '}
           <a href="https://www.jsdelivr.com/package/npm/sweetalert2" target="_blank" rel="noopener" className="nowrap">
-            jsDelivr CDN <i className="fa fa-external-link"></i>
+            jsDelivr CDN <IconExternalLink />
           </a>
         </p>
         <CodeExample

src/components/Nav.tsx

@@ -2,6 +2,7 @@ import Swal from 'sweetalert2'
 import { showSidebar } from '../utils'
 import { DocSearch } from './DocSearch'
 import { ThemeSelector } from '../utils/themableSwal'
+import { IconArrowLeft, IconBars } from './UiIcons'
 
 export const sidebarUrl = 'https://github.com/sweetalert2/sweetalert2.github.io/blob/main/src/utils/sidebar.tsx'
 
@@ -16,15 +17,15 @@ export function Nav({
     <>
       <Sidebar />
       <button className="show-sidebar" onClick={() => showSidebar()} aria-label="Open navigation menu">
-        <i className="fa fa-bars" aria-hidden="true"></i>
+        <IconBars />
       </button>
 
       {recipeGallery ? (
         <>
           <div className="recipe-gallery-top-nav">
             {showBackToRecipeGalleryLink ? (
               <a href="/recipe-gallery/">
-                <i className="fa fa-arrow-left"></i> Back to Recipe Gallery
+                <IconArrowLeft /> Back to Recipe Gallery
               </a>
             ) : null}
             <DocSearch />

src/components/UiIcons.tsx

@@ -0,0 +1,50 @@
+// Inline replacements for the handful of Font Awesome 4 icons this site used
+// for its own chrome. FA4 is EOL and pulled a whole icon webfont from a CDN for
+// three glyphs. These size off the inherited font-size and inherit text colour.
+//
+// All are decorative: every call site has adjacent text or its own aria-label,
+// so they are hidden from assistive tech.
+
+const decorative = {
+  'width': '1em',
+  'height': '1em',
+  'aria-hidden': true,
+  'focusable': 'false',
+} as const
+
+const stroke = {
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+export function IconBars() {
+  return (
+    <svg {...decorative} className="ui-icon" viewBox="0 0 24 24" fill="currentColor">
+      <rect x="3" y="5" width="18" height="2" rx="1" />
+      <rect x="3" y="11" width="18" height="2" rx="1" />
+      <rect x="3" y="17" width="18" height="2" rx="1" />
+    </svg>
+  )
+}
+
+export function IconArrowLeft() {
+  return (
+    <svg {...decorative} className="ui-icon" viewBox="0 0 24 24" {...stroke}>
+      <path d="M19 12H5" />
+      <path d="m12 19-7-7 7-7" />
+    </svg>
+  )
+}
+
+export function IconExternalLink() {
+  return (
+    <svg {...decorative} className="ui-icon" viewBox="0 0 24 24" {...stroke}>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+    </svg>
+  )
+}

src/examples/functions.ts

@@ -57,11 +57,11 @@ export default {
       showCancelButton: true,
       focusConfirm: false,
       confirmButtonText: `
-        <i class="fa fa-thumbs-up"></i> Great!
+        👍 Great!
       `,
       confirmButtonAriaLabel: 'Thumbs up, great!',
       cancelButtonText: `
-        <i class="fa fa-thumbs-down"></i>
+        👎
       `,
       cancelButtonAriaLabel: 'Thumbs down',
     })
@@ -454,7 +454,7 @@ export default {
         I agree with the terms and conditions
       `,
       confirmButtonText: `
-        Continue&nbsp;<i class="fa fa-arrow-right"></i>
+        Continue&nbsp;→
       `,
       inputValidator: (result) => {
         return !result && 'You need to agree with T&C'

styles/styles.scss

@@ -639,6 +639,13 @@ tr:hover {
   white-space: nowrap;
 }
 
+// Inline UI icons (src/components/UiIcons.tsx). Sized in em so they scale with
+// the inherited font-size, nudged down to sit on the text baseline the way the
+// Font Awesome glyphs they replaced did.
+.ui-icon {
+  vertical-align: -0.125em;
+}
+
 .border-radius-0 {
   border-radius: 0 !important;
 }