fix: icons, use FontAwesome package

package-lock.json

@@ -10,6 +10,10 @@
       "dependencies": {
         "@emotion/react": "11.11.4",
         "@emotion/styled": "11.11.0",
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-brands-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@mui/icons-material": "5.15.11",
         "@mui/lab": "5.0.0-alpha.166",
         "@mui/material": "5.15.11",
@@ -1093,6 +1097,64 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",

package.json

@@ -16,6 +16,10 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",

src/components/FontAwesomeIconStack/index.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react'
+
+import styles from './styles.module.scss'
+
+/**
+ * This Component overlays FontAwesomeIcon icons on top of each other
+ */
+export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => {
+  return <div className={styles.iconStackContainer}>{children}</div>
+}

src/components/FontAwesomeIconStack/styles.module.scss

@@ -0,0 +1,7 @@
+.iconStackContainer {
+  position: relative;
+
+  > * {
+    position: absolute;
+  }
+}

src/layouts/modal/index.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react-router-dom'
 import styles from './style.module.scss'
 import { appPublicRoutes } from '../../routes'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function useRouteMatch(patterns: readonly string[]) {
   const { pathname } = useLocation()
@@ -68,16 +70,7 @@ export const Modal = () => {
               }
             }}
           >
-            <svg
+            <FontAwesomeIcon icon={faClose} />
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="-96 0 512 512"
-              width="1em"
-              height="1em"
-              fill="currentColor"
-            >
-              {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
-              <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path>
-            </svg>
           </IconButton>
         </header>
 

src/pages/landing/index.tsx

@@ -8,6 +8,17 @@ import { Container } from '../../components/Container'
 import styles from './style.module.scss'
 import bg_l from '../../assets/images/bg_l.svg'
 import bg_r from '../../assets/images/bg_r.svg'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faOsi } from '@fortawesome/free-brands-svg-icons'
+import {
+  faCheck,
+  faMobileScreenButton,
+  faShieldHeart,
+  faSlash,
+  faUsers,
+  faWifi
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
 
 export const LandingPage = () => {
   const navigate = useNavigate()
@@ -19,18 +30,7 @@ export const LandingPage = () => {
 
   const cards = [
     {
-      icon: (
+      icon: <FontAwesomeIcon width={25} height={25} icon={faOsi} />,
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          {/* <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> */}
-          <path d="M8 266.4C10.3 130.6 105.4 34 221.8 18.3c138.8-18.6 255.6 75.8 278 201.1 21.3 118.8-44 230-151.6 274-9.3 3.8-14.4 1.7-18-7.7q-26.7-69.5-53.4-139c-3.1-8.1-1-13.2 7-16.8 24.2-11 39.3-29.4 43.3-55.8a71.5 71.5 0 0 0 -64.5-82.2c-39-3.4-71.8 23.7-77.5 59.7-5.2 33 11.1 63.7 41.9 77.7 9.6 4.4 11.5 8.6 7.8 18.4q-26.9 69.9-53.7 139.9c-2.6 6.9-8.3 9.3-15.5 6.5-52.6-20.3-101.4-61-130.8-119-24.9-49.2-25.2-87.7-26.8-108.7zm20.9-1.9c.4 6.6 .6 14.3 1.3 22.1 6.3 71.9 49.6 143.5 131 183.1 3.2 1.5 4.4 .8 5.6-2.3q22.4-58.7 45-117.3c1.3-3.3 .6-4.8-2.4-6.7-31.6-19.9-47.3-48.5-45.6-86 1-21.6 9.3-40.5 23.8-56.3 30-32.7 77-39.8 115.5-17.6a91.6 91.6 0 0 1 45.2 90.4c-3.6 30.6-19.3 53.9-45.7 69.8-2.7 1.6-3.5 2.9-2.3 6q22.8 58.8 45.2 117.7c1.2 3.1 2.4 3.8 5.6 2.3 35.5-16.6 65.2-40.3 88.1-72 34.8-48.2 49.1-101.9 42.3-161-13.7-117.5-119.4-214.8-255.5-198-106.1 13-195.3 102.5-197.1 225.8z" />
-        </svg>
-      ),
       title: <>Open Source</>,
       description: (
         <>
@@ -44,16 +44,7 @@ export const LandingPage = () => {
     },
     {
       icon: (
-        <svg
+        <FontAwesomeIcon width={25} height={25} icon={faMobileScreenButton} />
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 384 512"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          {/* <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> */}
-          <path d="M16 64C16 28.7 44.7 0 80 0L304 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L80 512c-35.3 0-64-28.7-64-64L16 64zM224 448a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM304 64L80 64l0 320 224 0 0-320z" />
-        </svg>
       ),
       title: <>Multi-Device</>,
       description: (
@@ -64,18 +55,7 @@ export const LandingPage = () => {
       )
     },
     {
-      icon: (
+      icon: <FontAwesomeIcon width={25} height={25} icon={faShieldHeart} />,
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
-          <path d="M256.3-.0068C261.9-.0507 267.3 1.386 272.1 4.066L476.5 90.53C487.7 95.27 495.2 105.1 495.9 118.1C501.6 213.6 466.7 421.9 272.5 507.7C267.6 510.5 261.1 512.1 256.3 512C250.5 512.1 244.9 510.5 239.1 507.7C45.8 421.9 10.95 213.6 16.57 118.1C17.28 105.1 24.83 95.27 36.04 90.53L240.4 4.066C245.2 1.386 250.7-.0507 256.3-.0068H256.3zM266.1 363.4L364.2 263.6C392.2 234.7 390.5 186.6 358.1 159.5C331.8 135.8 291.5 140.2 266.1 166.5L256.4 176.1L245.9 166.5C221.4 140.2 180.2 135.8 153 159.5C121.5 186.6 119.8 234.7 147.8 263.6L244.2 363.4C251.2 369.5 260.8 369.5 266.1 363.4V363.4z"></path>
-        </svg>
-      ),
       title: <>Secure &amp; Private</>,
       description: (
         <>
@@ -85,18 +65,7 @@ export const LandingPage = () => {
       )
     },
     {
-      icon: (
+      icon: <FontAwesomeIcon width={25} height={25} icon={faCheck} />,
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          {/* <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> */}
-          <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
-        </svg>
-      ),
       title: <>Verifiable</>,
       description: (
         <>
@@ -107,24 +76,10 @@ export const LandingPage = () => {
     },
     {
       icon: (
-        <svg
+        <FontAwesomeIconStack>
-          xmlns="http://www.w3.org/2000/svg"
+          <FontAwesomeIcon width={25} height={25} icon={faSlash} />
-          width="1em"
+          <FontAwesomeIcon width={25} height={25} icon={faWifi} />
-          height="1em"
+        </FontAwesomeIconStack>
-          viewBox="0 0 24 24"
-          strokeWidth="2"
-          stroke="currentColor"
-          fill="none"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <line x1="12" y1="18" x2="12.01" y2="18"></line>
-          <path d="M9.172 15.172a4 4 0 0 1 5.656 0"></path>
-          <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163.155a7.965 7.965 0 0 1 3.287 2"></path>
-          <path d="M3.515 9.515A12 12 0 0 1 7.059 7.06m3.101-.92a12 12 0 0 1 10.325 3.374"></path>
-          <line x1="3" y1="3" x2="21" y2="21"></line>
-        </svg>
       ),
       title: <>Works Offline</>,
       description: (
@@ -135,18 +90,7 @@ export const LandingPage = () => {
       )
     },
     {
-      icon: (
+      icon: <FontAwesomeIcon width={25} height={25} icon={faUsers} />,
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 640 512"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-        >
-          {/* <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> */}
-          <path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z" />
-        </svg>
-      ),
       title: <>Multi-Party Signing</>,
       description: (
         <>