Fully working FontAwesomeIcon

leaky-ships/package.json

@@ -20,6 +20,7 @@
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
     "@fortawesome/pro-solid-svg-icons": "^6.4.2",
     "@fortawesome/pro-thin-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@fortawesome/sharp-solid-svg-icons": "^6.4.2",
     "@prisma/client": "^4.16.2",
     "@solidjs/meta": "^0.28.6",

leaky-ships/pnpm-lock.yaml

@@ -32,6 +32,9 @@ dependencies:
   '@fortawesome/pro-thin-svg-icons':
     specifier: ^6.4.2
     version: 6.4.2
+  '@fortawesome/react-fontawesome':
+    specifier: ^0.2.0
+    version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0)
   '@fortawesome/sharp-solid-svg-icons':
     specifier: ^6.4.2
     version: 6.4.2
@@ -1768,6 +1771,17 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.4.2
     dev: false
 
+  /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0):
+    resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==, tarball: https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.2.0/react-fontawesome-0.2.0.tgz}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6
+      react: '>=16.3'
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 6.4.2
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /@fortawesome/sharp-solid-svg-icons@6.4.2:
     resolution: {integrity: sha512-b8kA9CxRPmdgoOrELrYHokbF5f0C80SJg9NA+dYcny3SHMsUQCSUacEX1OOIERwRyb1t5ncB2XI9CAPDTQ8wVg==, tarball: https://npm.fontawesome.com/@fortawesome/sharp-solid-svg-icons/-/6.4.2/sharp-solid-svg-icons-6.4.2.tgz}
     engines: {node: '>=6'}
@@ -4352,6 +4366,14 @@ packages:
       '@prisma/engines': 4.16.2
     dev: false
 
+  /prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: false
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -4360,6 +4382,10 @@ packages:
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

leaky-ships/src/components/FontAwesomeIcon.tsx

@@ -1,34 +1,58 @@
-import { IconDefinition } from "@fortawesome/pro-solid-svg-icons"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome"
 import classNames from "classnames"
-import { JSX } from "solid-js"
+import { Show } from "solid-js"
+import classList from "~/lib/utils/get-class-list-from-props"
 
-function FontAwesomeIcon({
+function Path(props: { d: string | string[] }) {
-  icon,
-  className,
-  style,
-}: {
-  icon: IconDefinition
-  className?: string
-  style?: JSX.CSSProperties
-}) {
   return (
-    <svg
+    <>
-      aria-hidden="true"
+      {typeof props.d === "string" ? (
-      //   focusable="false"
+        <path fill="currentColor" d={props.d} />
-      data-prefix={icon.prefix}
+      ) : (
-      data-icon={icon.iconName}
+        <>
-      class={classNames(
+          <path class="fa-secondary" fill="currentColor" d={props.d[0]} />
-        "svg-inline--fa",
+          <path class="fa-primary" fill="currentColor" d={props.d[1]} />
-        "fa-".concat(icon.iconName),
+        </>
-        className,
       )}
-      role="img"
+    </>
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={`0 0 ${icon.icon[0]} ${icon.icon[1]}`}
-    >
-      <path fill="currentColor" d={icon.icon[4] as string}></path>
-    </svg>
   )
 }
 
-export default FontAwesomeIcon
+export function FontAwesomeIcon(
+  props: {
+    icon: IconDefinition
+    class?: string
+    className?: never
+  } & FontAwesomeIconProps,
+) {
+  return (
+    <svg
+      aria-hidden="true"
+      aria-labelledby={props.titleId}
+      data-prefix={props.icon.prefix}
+      data-icon={props.icon.iconName}
+      data-fa-transform={props.transform}
+      data-fa-mask={props.mask}
+      data-fa-mask-id={props.maskId}
+      data-fa-symbol={props.symbol}
+      tabIndex={props.tabIndex}
+      class={classNames(
+        "svg-inline--fa",
+        "fa-".concat(props.icon.iconName),
+        classList(props),
+        props.class,
+      )}
+      color={props.color}
+      style={props.style}
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${props.icon.icon[0]} ${props.icon.icon[1]}`}
+    >
+      <Show when={props.title}>
+        <title id={props.titleId}>{props.title}</title>
+      </Show>
+      <Path d={props.icon.icon[4]} />
+    </svg>
+  )
+}

leaky-ships/src/components/Gamefield/GamefieldPointer.tsx

@@ -2,7 +2,7 @@ import { faCrosshairs } from "@fortawesome/pro-solid-svg-icons"
 import { faRadar } from "@fortawesome/pro-thin-svg-icons"
 import classNames from "classnames"
 import {} from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { PointerProps } from "../../interfaces/frontend"
 
 function GamefieldPointer({

leaky-ships/src/components/Gamefield/HitElems.tsx

@@ -1,5 +1,5 @@
 import { faBurst, faXmark } from "@fortawesome/pro-solid-svg-icons"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import useIndex from "~/hooks/useIndex"
 import { Hit } from "../../interfaces/frontend"
 

leaky-ships/src/components/Gamefield/Item.tsx

@@ -1,5 +1,5 @@
 import { createEffect, createSignal } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { useDrawProps } from "~/hooks/useDrawProps"
 // import { HexColorPicker } from "react-colorful"
 import classNames from "classnames"
@@ -61,10 +61,7 @@ function Item({
             class="pixelart"
           />
         ) : (
-          <FontAwesomeIcon
+          <FontAwesomeIcon icon={icon} color={iconColor ?? "#444"} />
-            icon={icon}
-            // color={iconColor ?? "#444"}
-          />
         )}
       </div>
       <span>{text}</span>

leaky-ships/src/components/Lobby/LobbyFrame.tsx

@@ -4,7 +4,7 @@ import {
 } from "@fortawesome/pro-solid-svg-icons"
 import { JSX, createEffect, createMemo, createSignal } from "solid-js"
 import { useNavigate } from "solid-start"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { useGameProps } from "~/hooks/useGameProps"
 import { useSession } from "~/hooks/useSession"
 import useSocket from "~/hooks/useSocket"
@@ -94,10 +94,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
               {isConnected ? (
                 <span class="underline">{payload?.gamePin ?? "----"}</span>
               ) : (
-                <FontAwesomeIcon
+                <FontAwesomeIcon icon={faSpinnerThird} spin />
-                  icon={faSpinnerThird}
-                  // spin={true}
-                />
               )}
             </>
           )}
@@ -145,7 +142,7 @@ function LobbyFrame({ openSettings }: { openSettings: () => void }) {
           }}
         >
           <span>LEAVE</span>
-          <FontAwesomeIcon icon={faRightFromBracket} className="ml-4 w-12" />
+          <FontAwesomeIcon icon={faRightFromBracket} class="ml-4 w-12" />
         </Button>
       </div>
     </div>

leaky-ships/src/components/Lobby/Player.tsx

@@ -9,7 +9,7 @@ import {
 import { faCaretDown } from "@fortawesome/sharp-solid-svg-icons"
 import classNames from "classnames"
 import { createEffect, createMemo, createSignal } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { useGameProps } from "~/hooks/useGameProps"
 import { socket } from "~/lib/socket"
 import Button from "./Button"
@@ -38,11 +38,7 @@ function HourGlass() {
   }, [count])
 
   return (
-    <FontAwesomeIcon
+    <FontAwesomeIcon icon={icon()} class="ml-4 w-12" spin={count() === 0} />
-      icon={icon()}
-      className="ml-4 w-12"
-      // spin={count() === 0}
-    />
   )
 }
 
@@ -75,7 +71,7 @@ function Player({
         {primary() ? (
           <button class="absolute right-4 top-4  h-14 w-14 rounded-lg border-2 border-dashed border-warn bg-gray-800 bg-opacity-90">
             <FontAwesomeIcon
-              className="h-full w-full text-warn"
+              class="h-full w-full text-warn"
               icon={faCaretDown}
             />
           </button>
@@ -97,11 +93,11 @@ function Player({
       >
         Ready
         {isReady && isConnected ? (
-          <FontAwesomeIcon icon={faCheck} className="ml-4 w-12" />
+          <FontAwesomeIcon icon={faCheck} class="ml-4 w-12" />
         ) : primary() ? (
           <FontAwesomeIcon
             icon={faHandPointer}
-            className="ml-4 w-12"
+            class="ml-4 w-12"
             style={{
               "--fa-bounce-start-scale-x": 1.05,
               "--fa-bounce-start-scale-y": 0.95,
@@ -111,7 +107,7 @@ function Player({
               "--fa-bounce-land-scale-y": 0.975,
               "--fa-bounce-height": "-0.125em",
             }}
-            // bounce
+            bounce
           />
         ) : (
           <HourGlass />

leaky-ships/src/components/Lobby/SettingsFrame/Setting.tsx

@@ -4,7 +4,7 @@ import {
 } from "@fortawesome/pro-solid-svg-icons"
 import classNames from "classnames"
 import { JSX, createMemo } from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { setGameSetting } from "~/components/Gamefield/EventBar"
 import { useGameProps } from "~/hooks/useGameProps"
 import { GameSettingKeys } from "../../../interfaces/frontend"
@@ -25,14 +25,14 @@ function Setting({
         {children}
       </span>
       <FontAwesomeIcon
-        className={classNames(
+        class={classNames(
           "text-md mx-auto rounded-full px-4 drop-shadow-md transition-all",
           state() ? "text-blue-500" : "text-gray-800",
           {
             "bg-gray-300 ": state,
           },
         )}
-        // size="3x"
+        size="3x"
         icon={state() ? faToggleLargeOn : faToggleLargeOff}
       />
       <input

leaky-ships/src/components/Lobby/SettingsFrame/Settings.tsx

@@ -1,7 +1,7 @@
 import { faRotateLeft } from "@fortawesome/pro-regular-svg-icons"
 import { faXmark } from "@fortawesome/pro-solid-svg-icons"
 import {} from "solid-js"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { useGameProps } from "~/hooks/useGameProps"
 import { socket } from "~/lib/socket"
 import { GameSettings } from "../../../interfaces/frontend"
@@ -32,8 +32,8 @@ function Settings({ closeSettings }: { closeSettings: () => void }) {
               onClick={closeSettings}
             >
               <FontAwesomeIcon
-                className="h-full w-full text-gray-800 drop-shadow-md"
+                class="h-full w-full text-gray-800 drop-shadow-md"
-                // size="3x"
+                size="3x"
                 icon={faXmark}
               />
             </button>
@@ -52,8 +52,8 @@ function Settings({ closeSettings }: { closeSettings: () => void }) {
                 }
               >
                 <FontAwesomeIcon
-                  className="h-full w-full text-gray-800 drop-shadow-md"
+                  class="h-full w-full text-gray-800 drop-shadow-md"
-                  // size="3x"
+                  size="3x"
                   icon={faRotateLeft}
                 />
               </button>

leaky-ships/src/components/OptionButton.tsx

@@ -1,7 +1,7 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
 import classNames from "classnames"
 import { JSX } from "solid-js"
-import FontAwesomeIcon from "./FontAwesomeIcon"
+import { FontAwesomeIcon } from "./FontAwesomeIcon"
 
 function OptionButton({
   id,
@@ -30,7 +30,7 @@ function OptionButton({
     >
       <span class="mx-auto">{node ? node : id}</span>
       <FontAwesomeIcon
-        className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
+        class="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
         icon={icon}
       />
     </button>

leaky-ships/src/lib/utils/get-class-list-from-props.ts

@@ -0,0 +1,60 @@
+/* eslint-disable solid/reactivity */
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome"
+
+// Get CSS class list from a props object
+export default function classList(props: FontAwesomeIconProps) {
+  const {
+    beat,
+    fade,
+    beatFade,
+    bounce,
+    shake,
+    flash,
+    spin,
+    spinPulse,
+    spinReverse,
+    pulse,
+    fixedWidth,
+    inverse,
+    border,
+    listItem,
+    flip,
+    size,
+    rotation,
+    pull,
+  } = props
+
+  // map of CSS class names to properties
+  const classes = {
+    "fa-beat": beat,
+    "fa-fade": fade,
+    "fa-beat-fade": beatFade,
+    "fa-bounce": bounce,
+    "fa-shake": shake,
+    "fa-flash": flash,
+    "fa-spin": spin,
+    "fa-spin-reverse": spinReverse,
+    "fa-spin-pulse": spinPulse,
+    "fa-pulse": pulse,
+    "fa-fw": fixedWidth,
+    "fa-inverse": inverse,
+    "fa-border": border,
+    "fa-li": listItem,
+    // @ts-expect-error either true or direction
+    "fa-flip": flip === true,
+    "fa-flip-horizontal": flip === "horizontal" || flip === "both",
+    "fa-flip-vertical": flip === "vertical" || flip === "both",
+    [`fa-${size}`]: typeof size !== "undefined" && size !== null,
+    [`fa-rotate-${rotation}`]:
+      // @ts-expect-error is a direction
+      typeof rotation !== "undefined" && rotation !== null && rotation !== 0,
+    [`fa-pull-${pull}`]: typeof pull !== "undefined" && pull !== null,
+    "fa-swap-opacity": props.swapOpacity,
+  }
+
+  // map over all the keys in the classes object
+  // return an array of the keys where the value for the key is not null
+  return Object.keys(classes)
+    .map((key) => (classes[key] ? key : null))
+    .filter((key) => key)
+}

leaky-ships/src/routes/signin.tsx

@@ -3,7 +3,7 @@ import { faLeftLong } from "@fortawesome/pro-solid-svg-icons"
 import classNames from "classnames"
 import { createEffect, createSignal } from "solid-js"
 import { useNavigate, useSearchParams } from "solid-start"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import { useSession } from "~/hooks/useSession"
 
 // import { toast } from "react-toastify"

leaky-ships/src/routes/start.tsx

@@ -7,7 +7,7 @@ import status from "http-status"
 import { createEffect, createMemo, createSignal } from "solid-js"
 import { useLocation, useNavigate, useSearchParams } from "solid-start"
 import BurgerMenu from "~/components/BurgerMenu"
-import FontAwesomeIcon from "~/components/FontAwesomeIcon"
+import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"
 import Logo from "~/components/Logo"
 import OptionButton from "~/components/OptionButton"
 import { useGameProps } from "~/hooks/useGameProps"