archived: replace fontawesome font with svg (@fehmer)

frontend/__tests__/components/Button.spec.tsx

@@ -1,3 +1,4 @@
+import { faKeyboard } from "@fortawesome/free-solid-svg-icons";
 import { render, cleanup } from "@solidjs/testing-library";
 import { describe, it, expect, vi, afterEach } from "vitest";
 
@@ -52,7 +53,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
       />
     ));
@@ -70,7 +71,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
           fixedWidth: true,
         }}
       />
@@ -88,7 +89,7 @@ describe("Button component", () => {
         }}
         fa={{
           fixedWidth: true,
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
         text="Hello"
       />
@@ -105,7 +106,7 @@ describe("Button component", () => {
           //
         }}
         fa={{
-          icon: "keyboard",
+          icon: faKeyboard,
         }}
         text="Hello"
       />

frontend/package.json

@@ -23,6 +23,10 @@
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
+    "@fortawesome/fontawesome-svg-core": "7.1.0",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/schemas": "workspace:*",
@@ -60,7 +64,7 @@
   },
   "devDependencies": {
     "@eslint/json": "0.14.0",
-    "@fortawesome/fontawesome-free": "5.15.4",
+    "@fortawesome/fontawesome-common-types": "0.2.36",
     "@monkeytype/oxlint-config": "workspace:*",
     "@monkeytype/typescript-config": "workspace:*",
     "@solidjs/testing-library": "0.8.10",
@@ -83,7 +87,6 @@
     "eslint-plugin-compat": "6.0.2",
     "eslint-plugin-solid": "0.14.5",
     "firebase-tools": "13.15.1",
-    "fontawesome-subset": "4.4.0",
     "happy-dom": "20.0.10",
     "jsdom": "27.4.0",
     "madge": "8.0.0",

frontend/src/html/pages/test-result.html

@@ -6,6 +6,7 @@
       <div class="group wpm">
         <div class="top">
           <div class="text">wpm</div>
+          <i class="fas fa-user"></i>
           <div
             class="crown hidden"
             aria-label=""

frontend/src/styles/account.scss

@@ -254,7 +254,7 @@
           align-items: center;
         }
 
-        .fas,
+        .fa,
         .punc {
           margin-right: 0.25rem;
         }
@@ -337,7 +337,7 @@
       &.loading {
         pointer-events: none;
       }
-      &.disabled .fas {
+      &.disabled .fa {
         opacity: 0.5;
         color: var(--sub-color);
       }
@@ -374,9 +374,9 @@
       .title {
         display: flex;
         align-items: baseline;
-        .fab,
-        .fas,
-        .far {
+        .fa,
+        .fa,
+        .fa {
           margin-right: 0.5em;
         }
       }

frontend/src/styles/buttons.scss

@@ -6,9 +6,9 @@ a.textButton {
 button,
 .button,
 .textButton {
-  .fas,
-  .far,
-  .fab,
+  .fa,
+  .fa,
+  .fa,
   .icon {
     line-height: 1.25;
     pointer-events: none;
@@ -127,7 +127,7 @@ button.text,
   font-size: 1em;
   display: inline-flex;
   gap: 0.5em;
-  align-items: baseline;
+  align-items: center;
   justify-content: center;
 
   &.danger {

frontend/src/styles/commandline.scss

@@ -96,8 +96,14 @@
           color: var(--sub-color);
         }
 
-        .fas,
-        .far {
+        i.iconPlaceholder {
+          display: inline-block;
+          margin-right: 0.5rem;
+          width: 1.25em;
+        }
+
+        .fa,
+        .fa {
           margin-right: 0.5rem;
           color: var(--sub-color);
         }
@@ -109,9 +115,9 @@
         &.active {
           color: var(--bg-color) !important;
           background: var(--text-color) !important;
-          .fas,
-          .far,
-          .fab {
+          .fa,
+          .fa,
+          .fa {
             color: var(--bg-color);
           }
         }

frontend/src/styles/core.scss

@@ -346,8 +346,8 @@ kbd {
   align-items: baseline;
   --spacing: 0.5em;
   --horizontalScale: 1.25;
-  .fas,
-  .far {
+  .fa,
+  .fa {
     margin-right: calc(var(--spacing) * var(--horizontalScale));
     margin-left: calc(var(--spacing) * var(--horizontalScale));
     margin-top: var(--spacing);

frontend/src/styles/inputs.scss

@@ -115,42 +115,39 @@ input[type="checkbox"] {
   transition: background 0.125s;
   flex-shrink: 0;
   &:after {
-    font-family: "Font Awesome";
-    content: "\f00c";
+    content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: block;
     border-radius: calc((var(--roundness) / 2) - 0.1em);
-    font-weight: 900;
     position: absolute;
-    display: grid;
-    justify-content: center;
-    align-content: center;
-    font-size: 0.75em;
-    transition: color 0.125s;
-    color: transparent;
+    // Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.
+    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>')
+      center / 75% no-repeat;
+    background: transparent;
+    transition: background 0.125s;
   }
 
   &:checked:after {
-    color: var(--main-color);
+    background: var(--main-color);
   }
   &:hover:after {
-    color: var(--bg-color);
+    background: var(--bg-color);
   }
   &:hover:checked:after {
-    color: var(--text-color);
+    background: var(--text-color);
   }
 
   &[disabled] {
     opacity: 0.33;
     pointer-events: none;
     &:hover:after {
-      color: var(--sub-alt-color);
+      background: var(--sub-alt-color);
     }
     &:hover:checked:after {
-      color: var(--main-color);
+      background: var(--main-color);
     }
   }
 }

frontend/src/styles/nav.scss

@@ -19,7 +19,7 @@ nav {
     .text {
       font-size: 0.75em;
       align-self: center;
-      .fas {
+      .fa {
         margin-left: 0.33em;
       }
     }