fix: refactor to use lucide icons dynamically

next.config.mjs

@@ -11,6 +11,7 @@ const nextConfig = {
       },
     ],
   },
+  transpilePackages: ["lucide-react"],
 };
 
 export default nextConfig;

src/app/dashboard/(admin)/admin/users/data/user-dummy-data.ts

@@ -1,8 +1,10 @@
+import type { LucideIconName } from "~/components/common/lucide-icon";
+
 interface UserCardData {
   title: string;
   value: number;
   description: string;
-  icon: string;
+  icon: LucideIconName;
 }
 
 interface UserStatusProperties {
@@ -23,19 +25,19 @@ export const userCardData: UserCardData[] = [
     title: "Total Users",
     value: 4000,
     description: "+10% from last month",
-    icon: `/admin-dashboard/icons/user.svg`,
+    icon: "user",
   },
   {
     title: "Active Users",
     value: 1500,
     description: "+20% from last month",
-    icon: `/admin-dashboard/icons/box.svg`,
+    icon: "box",
   },
   {
     title: "Deleted Users",
     value: 2500,
     description: "+150% from last month",
-    icon: `/admin-dashboard/icons/arrowUp.svg`,
+    icon: "arrow-up",
   },
 ];
 

src/app/dashboard/(user-dashboard)/(user-metrics)/analytics/page.tsx

@@ -1,3 +1,3 @@
 export default function DashboardAnalytics() {
-  return <div>REPORTS</div>;
+  return <div>ANALYTICS</div>;
 }

src/app/dashboard/(user-dashboard)/_components/overview-revenue/revenueData.ts

@@ -1,33 +1,35 @@
+import type { LucideIconName } from "~/components/common/lucide-icon";
+
 type CardData = {
   title: string;
   value: string;
   description: string;
-  icon: string;
+  icon: LucideIconName;
 };
 
 export const revenueData: CardData[] = [
   {
     title: "Total Revenue",
     value: "$45,000.00",
     description: "+20% from last month",
-    icon: `/admin-dashboard/icons/dollarSign.svg`,
+    icon: "dollar-sign",
   },
   {
     title: "Subscriptions",
     value: "+2,350",
     description: "+150% from last month",
-    icon: `/admin-dashboard/icons/userGroup.svg`,
+    icon: "users",
   },
   {
     title: "Sales",
     value: "15,000",
     description: "+10% from last month",
-    icon: `/admin-dashboard/icons/creditCard.svg`,
+    icon: "credit-card",
   },
   {
     title: "Active Now",
     value: "574",
     description: "+201 since last hour",
-    icon: `/admin-dashboard/icons/arrowRise.svg`,
+    icon: "trending-up",
   },
 ];

src/components/adminDashboard/TopProductsComponent.tsx

@@ -1,5 +1,5 @@
-import Image from "next/image";
-import React from "react";
+import { ArrowUpRightIcon } from "lucide-react";
+import { FC } from "react";
 
 import { Card } from "../ui/card";
 
@@ -13,21 +13,7 @@ type TopProductsProperties = {
   gradients: string[];
 };
 
-const ExternalLinkIcon = () => {
-  return (
-    <>
-      <Image
-        src="/admin-dashboard/icons/arrowUp.svg"
-        alt="external link icon"
-        height={16}
-        width={16}
-        className="invert"
-      />
-    </>
-  );
-};
-
-const TopProductsComponent: React.FC<TopProductsProperties> = ({
+const TopProductsComponent: FC<TopProductsProperties> = ({
   data,
   gradients,
 }) => {
@@ -45,7 +31,7 @@ const TopProductsComponent: React.FC<TopProductsProperties> = ({
         </div>
         <button className="flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-orange-500 px-4 py-2 text-sm font-medium text-neutral-50">
           <div className="text-sm font-semibold leading-6">View All</div>
-          <ExternalLinkIcon />
+          <ArrowUpRightIcon size={16} />
         </button>
       </div>
       <ul className="text-[#0A0A0A]">

src/components/adminDashboard/cardData.ts

@@ -1,33 +1,35 @@
+import type { LucideIconName } from "~/components/common/lucide-icon";
+
 type CardData = {
   title: string;
   value: string;
   description: string;
-  icon: string;
+  icon: LucideIconName;
 };
 
 export const cardData: CardData[] = [
   {
     title: "Total Revenue",
     value: "$45,000.00",
     description: "+20% from last month",
-    icon: `/admin-dashboard/icons/dollarSign.svg`,
+    icon: "dollar-sign",
   },
   {
     title: "Total Users",
     value: "+4,000",
     description: "+10% from last month",
-    icon: `/admin-dashboard/icons/user.svg`,
+    icon: "user",
   },
   {
     title: "Total Products",
     value: "1,000",
     description: "+20% from last month",
-    icon: `/admin-dashboard/icons/box.svg`,
+    icon: "box",
   },
   {
     title: "Lifetime Sales",
     value: "$450,000.00",
     description: "+150% from last month",
-    icon: `/admin-dashboard/icons/arrowUp.svg`,
+    icon: "arrow-up-right",
   },
 ];

src/components/common/DashboardCard/CardComponent.tsx

@@ -1,11 +1,12 @@
-import Image from "next/image";
-import { FC } from "react";
+import { ComponentProps, FC } from "react";
+
+import Icon from "~/components/common/lucide-icon";
 
 interface CardProperties {
   title: string;
   value: string | number;
   description: string;
-  icon: string;
+  icon: ComponentProps<typeof Icon>["name"];
 }
 
 const CardComponent: FC<CardProperties> = ({
@@ -15,32 +16,23 @@ const CardComponent: FC<CardProperties> = ({
   icon,
 }) => {
   return (
-    <>
-      <div className="w-full rounded-xl bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread ring-1 ring-border">
-        <div className="flex flex-row items-center justify-between">
-          <h4 className="text-sm font-[500] leading-[16.94px] text-neutral-dark-2">
-            {title}
-          </h4>
-
-          <Image
-            src={icon}
-            alt={title}
-            width={24}
-            height={24}
-            className="mr-2"
-          />
-        </div>
+    <div className="w-full rounded-xl bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread ring-1 ring-border">
+      <div className="flex flex-row items-center justify-between">
+        <h4 className="text-sm font-[500] leading-[16.94px] text-neutral-dark-2">
+          {title}
+        </h4>
+        <Icon name={icon} width={24} height={24} className="mr-2" />
+      </div>
 
-        <div className="mt-1">
-          <h2 className="text-2xl font-semibold leading-[29.05px] text-neutral-dark-2">
-            {value}
-          </h2>
-          <small className="mt-0 text-xs leading-[14.52px] text-neutral-dark-1">
-            {description}
-          </small>
-        </div>
+      <div className="mt-1">
+        <h2 className="text-2xl font-semibold leading-[29.05px] text-neutral-dark-2">
+          {value}
+        </h2>
+        <small className="mt-0 text-xs leading-[14.52px] text-neutral-dark-1">
+          {description}
+        </small>
       </div>
-    </>
+    </div>
   );
 };
 

src/components/common/lucide-icon/index.tsx

@@ -0,0 +1,19 @@
+import { LucideProps } from "lucide-react";
+import dynamicIconImports from "lucide-react/dynamicIconImports";
+import dynamic from "next/dynamic";
+
+interface ILucideIcon {
+  name: keyof typeof dynamicIconImports;
+}
+
+export type LucideIconName = ILucideIcon["name"];
+
+interface IconProperties extends Omit<LucideProps, "name">, ILucideIcon {}
+
+const Icon = ({ name, ...properties }: IconProperties) => {
+  const LucideIcon = dynamic(dynamicIconImports[name]);
+
+  return <LucideIcon {...properties} />;
+};
+
+export default Icon;