How to display a logo on the AppBar component of react-admin?

Question

Simple react-admin app. Trying to display a logo. I have the app title and a placeholder for the logo shows up, but no picture. Tried both a .svg and .png. Here's what it looks like:

And here is the custom AppBar conponent:

const CustomAppBar = props => {
  const classes = useStyles();
  return (
    <AppBar {...props} color='secondary' >
      <Toolbar>
        {/* <img src="./images/g3tools_orange_logo_only copy.png" alt="logo" className={classes.logo} /> */}
        <img src='/images/g3tools-blue-windows-icon.svg' alt="logo" className={classes.logo} />
      </Toolbar>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
      >g3tools Admin</Typography> ...

and the custom layout component:

import React from 'react';
import { Layout } from 'react-admin';
import CustomAppBar from './CustomAppBar';

const CustomLayout = (props) => <Layout {...props} appBar={CustomAppBar} />;

export default CustomLayout;

and the Admin component in app.js:

const App = () => (
  <Admin
    layout={CustomLayout}
    // title={<AppTitle />}
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider} >
    {/* <Title title="g3tools Admin" /> */}
    <Resource
      name="items" ...

Thanks in advance.

Hi, look here: https://marmelab.com/blog/2019/03/15/react-admin-2-8.html#top-bar-content-customization — MaxAlex, Apr 27 '20 at 05:33
Yea, I've read through that but couldn't figure out how to import the logo as a component. But thanks. — Dan G., Apr 27 '20 at 17:28

score 4 · Accepted Answer · answered Apr 27 '20 at 17:28

Key was to import the .png file first then to use it as image source in curly braces, referring to the imported object. Here's the entire custom appbar component:

import React from 'react';
import { AppBar } from 'react-admin';
import Typography from '@material-ui/core/Typography';
import Toolbar from '@material-ui/core/Toolbar';
import { makeStyles } from '@material-ui/core/styles';

import logo from './images/g3tools-orange-64x64-lighter.png';

const useStyles = makeStyles({
  title: {
    flex: 1,
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    marginLeft: -10
  },
  spacer: {
    flex: 1,
  },
  logo: {
    maxWidth: "40px",
    marginLeft: -35
  },
});

const CustomAppBar = props => {
  const classes = useStyles();
  return (
    <AppBar {...props} color='secondary' >
      <Toolbar>
        <img src={logo} alt="logo" className={classes.logo} />
      </Toolbar>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
      >g3tools Admin</Typography>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
        id="react-admin-title"
      />
    </AppBar >
  );
};

export default CustomAppBar;

And here is how it looks, with the logo, app title, and with the page title in the middle of the appbar:

Not sure if this is the best way of doing it, but it works and makes sense to me with my current understanding.

How to display a logo on the AppBar component of react-admin?

1 Answers1