Added Iconify "Icon" web component for dynamic icons.

package-lock.json

@@ -34,6 +34,7 @@
         "zustand": "^4.5.2"
       },
       "devDependencies": {
+        "@iconify-icon/react": "^3.0.0",
         "@types/node": "^20.12.8",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
@@ -622,6 +623,29 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@iconify-icon/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify-icon/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-TOyzGUIfOFbmRQflMbf8k8bBGbeVAVCnvJ/rKz2SgBOV6VZLv7E9gzLvkPzfkZ2HZL+GbRtLNX/GJq2EI54OFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconify-icon": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3445,6 +3469,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iconify-icon": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.0.tgz",
+      "integrity": "sha512-yPcnpkn8HUEUckrxxJBOer3jbGv3bqozHsLMLBRxhk3As1X76BgV2mS2a1HTNOIagR8nUs30H3qAd9GLe8Mnlg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@iconify-icon/react": "^3.0.0",
     "@types/node": "^20.12.8",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",

src/components/Rooms/room-item-card.tsx

@@ -1,11 +1,12 @@
 import { Separator } from "../ui/separator";
 import { Card, CardContent } from "../ui/card";
 import { Typography } from "../ui/typography";
-import { BedDouble, BedSingle, UserIcon } from "lucide-react";
+import { UserIcon } from "lucide-react";
 import { RoomCategory, RoomCategoryPhoto } from "@/model/RoomCategory";
 import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import roomImg from "@/res/SomniaRoomImage.svg";
 import { cn } from "@/lib/utils";
+import { Icon } from "@iconify-icon/react";
 
 interface RoomItemCardProps {
   room: RoomCategory;
@@ -40,8 +41,7 @@ export function RoomItemCard({
           tooltipText={e.bedTypeName}
           label={e.amount.toString()}
         >
-          {e.bedTypeIcon.includes("bed-single") ? <BedSingle></BedSingle> : <BedDouble></BedDouble> }
-
+          <Icon icon={e.bedTypeIcon} height="auto" />
         </IconWithTooltip>
       </div>
     );

src/routes/Root.css

@@ -14,3 +14,9 @@ html {
   padding: 2rem;
   text-align: center;
 }
+
+iconify-icon {
+  display: inline-block;
+  min-width: 1em;
+  min-height: 1em;
+}