Unable to change graphics assets for admin

[rare jungle]

  admin: {
    user: Users.slug,
    meta: {
      titleSuffix: "- QS I-GAUGE",
      icons: [
        {
          rel: "icon",
          type: "image/svg",
          url: "/favicon.svg",
        },
      ],
      defaultOGImageType: "static",
      openGraph: {
        images: [
          {
            url: "/logo.svg",
          },
        ],
      },
    },
    components: {
      graphics: {
        Logo: Logo,
        Icon: Icon,
      },
    },
  },

const Logo = () => {
  return (
    <div className="logo">
      <img src="/logo.svg" alt="Igauge" />
    </div>
  );
};

export default Logo;

here is an example of what I tried to do which is pretty close to what the documentation suggests I believe but I get the error

CustomComponent<Record<string, any>> | undefined```
Any idea on how to fix this?

[summer bridge]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Field Hooks - Config Options
• Customizing Fields - Custom Components - Error
• Cloud Teams - Members
• Customizing CSS & SCSS
• Versions - Options - Versions, drafts, and autosave enabled

[midnight cedar]

Hey @rare jungle,

Payload v3 changed the way in which custom components get referenced in configs to allow more flexible and powerful patterns here, such as rendering them out on the server on demand.

In v3, to import a custom component, you're going to want to pass the path to your custom component instead of importing them into config.

Try this instead:

...
components: {
  graphics: {
    Logo: '/path/to/Logo',
    Icon: '/path/to/Icon',
  },
},

See here: https://payloadcms.com/docs/admin/components#defining-custom-components

[rare jungle]

ohh did not read on it, my bad will give it a try

@midnight cedar also thanks for the response

[midnight cedar]

My pleasure