feat(frontend): replace brand icons and add samsung

packages/frontend/package.json

@@ -20,9 +20,6 @@
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@fontsource/roboto": "^5.1.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^6.1.8",
     "@mui/icons-material": "^6.1.8",
     "@reduxjs/toolkit": "^2.3.0",

packages/frontend/src/components/fabric/FabricIcon.tsx

@@ -1,32 +1,34 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAmazon } from "@fortawesome/free-brands-svg-icons/faAmazon";
-import { faApple } from "@fortawesome/free-brands-svg-icons/faApple";
-import { faGoogle } from "@fortawesome/free-brands-svg-icons/faGoogle";
 import { Tooltip } from "@mui/material";
 import QuestionMark from "@mui/icons-material/QuestionMark";
 import { BridgeFabric } from "@home-assistant-matter-hub/common";
-import { IconLookup } from "@fortawesome/fontawesome-svg-core";
-import { useMemo } from "react";
+import { FC, SVGProps, useMemo } from "react";
+
+import AmazonIcon from "../../assets/brands/Amazon.svg?react";
+import AppleIcon from "../../assets/brands/Apple.svg?react";
+import GoogleIcon from "../../assets/brands/Google.svg?react";
+import SamsungIcon from "../../assets/brands/Samsung.svg?react";
+import Box from "@mui/material/Box";
 
 export interface FabricIconProps {
   fabric: BridgeFabric;
 }
 
-const iconsPerKeyword: Record<string, IconLookup> = {
-  Alexa: faAmazon,
-  Apple: faApple,
-  Google: faGoogle,
+const iconsPerKeyword: Record<string, FC<SVGProps<SVGSVGElement>>> = {
+  Alexa: AmazonIcon,
+  Apple: AppleIcon,
+  Google: GoogleIcon,
 };
 
-const iconPerVendorId: Record<number, IconLookup | undefined> = {
-  0x1217: faAmazon,
-  0x1349: faApple,
-  0x1384: faApple,
-  0x6006: faGoogle,
-  // 0x10e1: "Samsung SmartThings",
-};
+const iconPerVendorId: Record<number, FC<SVGProps<SVGSVGElement>> | undefined> =
+  {
+    0x1217: AmazonIcon,
+    0x1349: AppleIcon,
+    0x1384: AppleIcon,
+    0x6006: GoogleIcon,
+    0x10e1: SamsungIcon,
+  };
 
-function getIcon(fabric: BridgeFabric): IconLookup | undefined {
+function getIcon(fabric: BridgeFabric) {
   const icon = iconPerVendorId[fabric.rootVendorId];
   if (icon) {
     return icon;
@@ -37,10 +39,24 @@ function getIcon(fabric: BridgeFabric): IconLookup | undefined {
 }
 
 export const FabricIcon = ({ fabric }: FabricIconProps) => {
-  const icon = useMemo(() => getIcon(fabric), [fabric]);
+  const BrandIcon = useMemo(() => getIcon(fabric), [fabric]);
   return (
     <Tooltip title={`${fabric.label} (${fabric.rootVendorId})`} arrow>
-      <span>{icon ? <FontAwesomeIcon icon={icon} /> : <QuestionMark />}</span>
+      <Box
+        component="span"
+        sx={{ fill: (theme) => theme.palette.text.primary }}
+      >
+        {BrandIcon ? (
+          <BrandIcon
+            style={{
+              maxHeight: "1em",
+              maxWidth: "3em",
+            }}
+          />
+        ) : (
+          <QuestionMark />
+        )}
+      </Box>
     </Tooltip>
   );
 };

packages/frontend/src/main.tsx

@@ -9,19 +9,10 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 
-import {
-  faAmazon,
-  faApple,
-  faGoogle,
-} from "@fortawesome/free-brands-svg-icons";
-import { library as IconLibrary } from "@fortawesome/fontawesome-svg-core";
-
 import { AppLayout } from "./theme/AppLayout.tsx";
 import { routes } from "./routes.tsx";
 import { store } from "./state/store.ts";
 
-IconLibrary.add(faAmazon, faApple, faGoogle);
-
 let basename = document
   .getElementsByTagName("base")[0]
   ?.href?.replace(/\/$/, "");