How to add custom logo and icon

KasparTr

11 months ago

6

MyCustomIcon and MyCustomLogo

• 

  Sandro Wegmann

  11 months ago

  Those are react Components. sth like this does the job

  import logo from './logo.svg'
  
  export const Icon = () => (
      <img src={logo}></img>
  )

• 

  KasparTr

  11 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>
  )

• 

  Martin R

  11 months ago

  export default Logo; ?

• 

  Sandro Wegmann

  11 months ago

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

• 

  jesschow

  Payload Team

  11 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