How to add custom logo and icon

kaspartr2 years ago

5

MyCustomIcon and MyCustomLogo

• 

  sandrowegmann2 years ago

  Those are react Components. sth like this does the job

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

• 

  kaspartr2 years 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>
  )

• 

  Deleted User2 years ago

  export default Logo; ?

• 

  sandrowegmann2 years ago

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

• 

  jessrynkar2 years ago

  Hey

  @567578449439621124

  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