How to add custom logo and icon

default discord avatar
KasparTr
4 months ago
6

I am following this doc to add custom icon and logo.


https://payloadcms.com/docs/admin/components#base-component-overrides

It references some components like

MyCustomIcon and MyCustomLogo

but these files and their content is nowhere in github.



What datatype are these mysterious objects?

  • default discord avatar
    Sandro Wegmann
    4 months ago

    Those are react Components. sth like this does the job

    import logo from './logo.svg'
    
    export const Icon = () => (
        <img src={logo}></img>
    )
  • default discord avatar
    KasparTr
    4 months ago

    Adding this component to config throws the following error


    Type '{ Logo: () => JSX.Element; Icon: () => JSX.Element; }' is not assignable to type 'Element | (() => Element)'.
      Object literal may only specify known properties, and 'Logo' does not exist in type 'Element | (() => Element)'.


    Config


    import {Logo} from './components/logos/Logo';
    import {Icon} from './components/logos/Icon';
    ...
      components: {
        graphics: {
          Logo,
          Icon
        },
      },



    Here is my Logo


    import React from 'react';
    import '../../assets/styles/styles.scss';
    const icon = require("../../assets/graphics/ss_icon.svg") as string;
    export const Logo = () => (
      <img src={icon}></img>
    )
  • default discord avatar
    Martin R
    4 months ago

    export default Logo; ?

  • default discord avatar
    Sandro Wegmann
    4 months ago

    I guess you have to add types if you're using TS, the component above is just JS

  • discord user avatar
    jesschow
    Payload Team
    4 months ago

    Hey @KasparTr this needs to be nested under 'admin' in your payload config:



      admin: {
        components: {
          graphics: {
            Logo,
            Icon,
          },
        },
      },


    This blog post may be useful for you

    https://payloadcms.com/blog/white-label-admin-ui
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.