feat(nui): Icon support for custom notifications

web/package.json

@@ -7,6 +7,11 @@
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "11",
     "@emotion/styled": "11",
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.0",
+    "@fortawesome/free-regular-svg-icons": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

web/src/components/Notifications.tsx

@@ -1,6 +1,8 @@
 import { useToast, type ToastPositionWithLogical, Box } from "@chakra-ui/react";
 import { useNuiEvent } from "../hooks/useNuiEvent";
 import { debugData } from "../utils/debugData";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface Props {
   title?: string;
@@ -17,7 +19,7 @@ interface CustomProps {
   style?: React.CSSProperties;
   text: string;
   duration?: number;
-  icon?: string;
+  icon?: IconProp;
   position?: ToastPositionWithLogical;
   id?: number;
 }
@@ -38,9 +40,10 @@ debugData<CustomProps>([
     action: "customNotify",
     data: {
       text: "Dunak is nerd",
+      icon: "clipboard-check",
       style: {
-        backgroundColor: "red",
+        backgroundColor: "#2D3748",
-        color: "purple",
+        color: "white",
       },
     },
   },
@@ -57,6 +60,7 @@ const Notifications: React.FC = () => {
       position: data.position || "top-right",
       render: () => (
         <Box style={data.style} p={3}>
+          {data.icon && <FontAwesomeIcon icon={data.icon} />}
           {data.text}
         </Box>
       ),

web/src/index.tsx

@@ -6,6 +6,12 @@ import { VisibilityProvider } from "./providers/VisibilityProvider";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./theme";
 import { debugData } from "./utils/debugData";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(fas, far, fab);
 
 debugData([
   {