Unable to render svg in Material UI-CodePudding

I'm using Material-UI with create-react-app and am having trouble rendering an .svg file in a drawer header. I get a broken image rendering instead of the .svg I'm expecting. Any help would be greatly appreciated. Thanks!

<DrawerHeader>
  <div>
      <Icon classes={{root: classes.iconRoot}}>
          <img className={classes.imageIcon} src="/assets/logo.svg"/>
      </Icon>

  </div>
</DrawerHeader>

 imageIcon: {
    display: 'flex',
    height: '100%',
    width: 'inherit'
 },
 iconRoot: {
     textAlign: 'center'
 },

CodePudding user response：

You need to import the image like

import Img from '../../logo.svg'

then pass it to the src

 <img className={classes.imageIcon} src={Img} />