From dbadcd93b25b78fcfc79d638bfc638155b38196a Mon Sep 17 00:00:00 2001
From: Limon Monte <6059356+limonte@users.noreply.github.com>
Date: Wed, 5 Aug 2026 14:45:05 +0300
Subject: [PATCH] perf: replace Font Awesome with inline SVG icons

Font Awesome 4 is EOL and was pulled from jsdelivr as a render-blocking
stylesheet, then downloaded a whole icon webfont, to draw 3 glyphs of
site chrome. With animate.css already bundled in #270, removing it takes
the last third-party stylesheet off the critical path.

- new src/components/UiIcons.tsx: IconBars, IconArrowLeft,
  IconExternalLink as inline SVG, sized in em so they scale with the
  inherited font-size and inherit text colour. All decorative, so
  aria-hidden - every call site has adjacent text or its own aria-label.
- .ui-icon in styles.scss nudges them onto the text baseline where the
  webfont glyphs sat.
- the example code in src/examples/functions.ts uses emoji instead:
  those snippets are displayed verbatim as documentation, so inlining
  SVG there would wreck them. Existing aria labels are unchanged.
- drop the font-awesome <link>, and with it the now-dead jsdelivr
  preconnect from #267.

No stylesheet is loaded from a third party any more. The remaining
external origins are all deferred, after-mount, or on-demand, so they
keep dns-prefetch only.

The stray fa-info-circle in validation-message-custom-icon-src.tsx is
left alone: it runs inside Sandpack, which only ever injects sweetalert2
and never had Font Awesome, so it was already not rendering. Pre-existing
and untouched by this change.

Part of #259

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 partials/head.html              | 20 ++++---------
 src/components/Examples.tsx     |  3 +-
 src/components/Installation.tsx |  3 +-
 src/components/Nav.tsx          |  5 ++--
 src/components/UiIcons.tsx      | 50 +++++++++++++++++++++++++++++++++
 src/examples/functions.ts       |  6 ++--
 styles/styles.scss              |  7 +++++
 7 files changed, 73 insertions(+), 21 deletions(-)
 create mode 100644 src/components/UiIcons.tsx

diff --git a/partials/head.html b/partials/head.html
index 13e00deb..8714cd2d 100644
--- a/partials/head.html
+++ b/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"
diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx
index 0017012b..aed4bc89 100644
--- a/src/components/Examples.tsx
+++ b/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
diff --git a/src/components/Installation.tsx b/src/components/Installation.tsx
index b00eb574..7e487acd 100644
--- a/src/components/Installation.tsx
+++ b/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
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index aeb1df96..44b820b2 100644
--- a/src/components/Nav.tsx
+++ b/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,7 +17,7 @@ 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 ? (
@@ -24,7 +25,7 @@ export function Nav({
           <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 />
diff --git a/src/components/UiIcons.tsx b/src/components/UiIcons.tsx
new file mode 100644
index 00000000..0f47d2de
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/examples/functions.ts b/src/examples/functions.ts
index fdcfc366..edb6e572 100644
--- a/src/examples/functions.ts
+++ b/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'
diff --git a/styles/styles.scss b/styles/styles.scss
index ccc63186..279d5d2c 100644
--- a/styles/styles.scss
+++ b/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;
 }