living-lavenderL
Refine•17mo ago•
8 replies
living-lavender

How to make resource icons more flexible?

Hi there, I'm creating something like a CRM using Refine with Next.js and a Headless UI framework (I'm using Shadcn), so, I already have my resource items like this:
import { IResourceItem } from "@refinedev/core";
import { Building2, Home } from "lucide-react";

export const resources: IResourceItem[] = [
    {
        name: 'dashboard',
        list: '/',
        meta: {
            label: 'Dashboard',
            icon: <Home className="h-5 w-5" />,
        },
    },
    {
        name: 'companies',
        list: '/companies',
        show: '/companies/:id',
        create: '/companies/new',
        edit: '/companies/edit/:id',
        meta: {
            label: 'Companies',
            icon: <Building2 className="h-5 w-5" />,
        },
    }
];

The main idea here is to have a Menu component and a Header (this one will contain a mobile version of the menu) component in both I use the useMenu hook to get the menu items but in each component I need to use different classNames for the icons.

So the question is, how can I make the icon in the resource item accepts a function that returns a ReactNode (which is the expected type for the icon). I tried to create my custom type as follows:
interface CustomResourceItem extends IResourceItem {
  meta: {
    label: string;
    icon: ((className?: string) => ReactNode) | ReactNode;
  };
};

But I get a TypeScript error and it's driving me crazy, so could anyone help me pls?
Was this page helpful?