2

Tengo un script que muestra este menú como pueden ver existe un pequeño espacio donde debe ir un logotipo, tengo uno ya cargado en un servidor en formato svg.

Menu sin logo

El problema es que yo no se mucho de React y no se como agregar este logo.

El código del sitio que creo controla esta sección es este, espero me puedan a ayudar indicandome como le tengo que hacer, saludos.

import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";

import {
  makeStyles,
  Drawer,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  MenuItem,
  IconButton,
  Menu,
} from "@material-ui/core";

import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import AccountCircle from "@material-ui/icons/AccountCircle";

import MainListItems from "./MainListItems";
import NotificationsPopOver from "../components/NotificationsPopOver";
import UserModal from "../components/UserModal";
import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading";
import { i18n } from "../translate/i18n";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    height: "100vh",
    [theme.breakpoints.down("sm")]: {
      height: "calc(100vh - 56px)",
    },
  },

  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  toolbarIcon: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: "0 8px",
    minHeight: "48px",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: 36,
  },
  menuButtonHidden: {
    display: "none",
  },
  title: {
    flexGrow: 1,
  },
  drawerPaper: {
    position: "relative",
    whiteSpace: "nowrap",
    width: drawerWidth,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerPaperClose: {
    overflowX: "hidden",
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    width: theme.spacing(7),
    [theme.breakpoints.up("sm")]: {
      width: theme.spacing(9),
    },
  },
  appBarSpacer: {
    minHeight: "48px",
  },
  content: {
    flex: 1,
    overflow: "auto",
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
  },
  paper: {
    padding: theme.spacing(2),
    display: "flex",
    overflow: "auto",
    flexDirection: "column",
  },
}));

Actualización

Intente hacerlo así, pero no funcionó

import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";

import {
  makeStyles,
  Drawer,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  MenuItem,
  IconButton,
  Menu,
  SvgIcon, // Agrega SvgIcon de Material-UI //
} from "@material-ui/core";

import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import AccountCircle from "@material-ui/icons/AccountCircle";

import MainListItems from "./MainListItems";
import NotificationsPopOver from "../components/NotificationsPopOver";
import UserModal from "../components/UserModal";
import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading";
import { i18n } from "../translate/i18n";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    height: "100vh",
    [theme.breakpoints.down("sm")]: {
      height: "calc(100vh - 56px)",
    },
  },

  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  toolbarIcon: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: "0 8px",
    minHeight: "48px",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: 36,
  },
  menuButtonHidden: {
    display: "none",
  },
  title: {
    flexGrow: 1,
  },
  drawerPaper: {
    position: "relative",
    whiteSpace: "nowrap",
    width: drawerWidth,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerPaperClose: {
    overflowX: "hidden",
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    width: theme.spacing(7),
    [theme.breakpoints.up("sm")]: {
      width: theme.spacing(9),
    },
  },
  appBarSpacer: {
    minHeight: "48px",
  },
  content: {
    flex: 1,
    overflow: "auto",
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
  },
  paper: {
    padding: theme.spacing(2),
    display: "flex",
    overflow: "auto",
    flexDirection: "column",
  },
  logo: { // Agrega estilos para el logo
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginRight: theme.spacing(2),
  },
}));

// Defini tu icono SVG como un componente de React //
const Logo = (props) => (
  <SvgIcon {...props}>
 <g id="Capa_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M184.88 24.11l0.14 0.06c0.25,-0.35 2.31,-1.31 2.59,-1.38 0.14,0.28 0.29,0.48 0.47,0.75 0.41,0.61 1.55,2.67 1.8,3.31l0.39 0.91c0.35,0.77 1.13,2.84 1.37,3.74 0.17,0.67 0.39,1.35 0.56,2.02 0.73,2.94 1.46,8.35 1.09,11.5 -0.02,0.2 0.01,0.44 0,0.64 -0.02,0.27 -0.06,0.24 -0.07,0.58 -0.04,1.51 -0.88,4.92 -1.51,6.18 -0.27,0.54 -0.58,1.2 -0.91,1.68 -0.2,0.3 -0.37,0.46 -0.53,0.77l-2.25 0.2c-0.22,0.03 -0.24,-0.03 -0.42,-0.06 -0.56,-0.07 -0.56,0.08 -1.88,-0.13 -0.34,-0.05 -0.55,-0.06 -0.87,-0.13 -3.07,-0.6 -4.56,-1.33 -7.26,-2.74 -0.62,-0.32 -1.84,-1.18 -2.37,-1.58 -0.11,-0.09 -0.18,-0.12 -0.29,-0.22l-0.81 -0.69c-0.53,-0.39 -1.45,-1.5 -1.92,-2.11 -0.89,-1.17 -1.71,-2.79 -1.71,-4.37 -0.27,0.05 -2.52,1.35 -3.01,1.61 -0.14,0.07 -0.09,0.07 -0.21,0.15l-0.97 0.54c0,-1.87 0.15,-2.65 0.7,-4.26 0.82,-2.38 1.84,-3.58 3.09,-5.31l3.08 -3.4 5.16 -4.26c1.37,-0.89 2.7,-1.86 4.17,-2.67l0.76 -0.46c0.37,-0.23 1.2,-0.7 1.62,-0.87zm15.96 15.95l0 1.82 -0.37 3.99c-0.04,0.34 -0.15,0.76 -0.2,1.09 -0.05,0.36 -0.13,0.71 -0.21,1.02 -0.16,0.67 -0.35,1.31 -0.56,1.95 -0.1,0.31 -0.52,1.59 -0.75,1.73l-2.66 1.46c-0.12,0.07 -0.2,0.13 -0.32,0.19 -1.27,0.66 -1.04,0.52 -1.46,1.35 -0.38,0.75 -1,1.73 -1.48,2.26 -0.91,1.02 -0.87,0.95 -1.89,1.83 -1.09,0.78 -2.59,1.38 -4.15,1.7 -1.74,0.35 -3.64,0.3 -5.44,0.1 -2.32,-0.27 -5.12,-1.19 -7.26,-2.16 -1.88,-0.85 -3.31,-1.81 -4.96,-3.02l-1.58 -1.37c-0.62,-0.44 -0.71,-0.75 -1.06,-1.09l-1.6 -2.07c-1.54,-2.28 -2.22,-5.11 -1.71,-8.11 0.53,-3.12 2.04,-5.96 3.89,-8.47l1.61 -1.99c0.86,-0.95 3.48,-3.63 4.81,-4.61 0.17,-0.13 0.21,-0.21 0.38,-0.33l2.46 -1.86c0.56,-0.43 1.11,-0.78 1.7,-1.18 0.6,-0.4 1.18,-0.76 1.8,-1.15l0.9 -0.54c0.34,-0.18 0.59,-0.36 0.91,-0.52 0.53,-0.28 3.54,-1.92 3.67,-2.09l-1.58 -1.44 -1.76 -1.19c-0.31,-0.19 -0.66,-0.34 -1,-0.51 -3.99,-2 -8.26,-1.35 -12.21,0.18 -0.2,0.08 -0.33,0.14 -0.5,0.22 -0.26,0.11 -0.21,0.16 -0.5,0.22 -1.19,0.5 -2.53,1.3 -3.52,1.95 -0.59,0.39 -1.06,0.73 -1.6,1.13 -0.52,0.39 -1.05,0.81 -1.48,1.24 -0.02,0.01 -0.07,0.06 -0.08,0.07 -0.01,0.01 -0.04,0.05 -0.04,0.04 -0.01,-0.02 -0.02,0.02 -0.04,0.03 -0.28,-0.19 -0.3,-0.36 -0.51,-0.5 -0.17,-0.37 -1.39,-1.51 -1.66,-2.01 0.49,-0.51 1.5,-1.22 1.66,-1.44l2.05 -1.41c0.88,-0.59 1.48,-0.85 2.17,-1.28 0.28,-0.17 0.5,-0.26 0.75,-0.41 0.22,-0.13 0.42,-0.31 0.72,-0.33 0.41,-0.12 1.98,-0.87 2.95,-1.18 1.11,-0.35 2.16,-0.62 3.36,-0.83 2.39,-0.42 1.08,0.29 3.83,-1.31 0.14,-0.09 0.19,-0.1 0.33,-0.18 0.12,-0.06 0.25,-0.17 0.35,-0.22l0.8 -0.43c0.12,-0.06 0.03,-0.02 0.18,-0.1 0.29,-0.16 0.19,-0.04 0.33,-0.3 0.53,0 0.74,-0.08 1.24,-0.08 0.74,0 1.67,0.12 2.38,0.21 2.39,0.32 4.67,1.28 6.58,2.55 1.1,0.73 1.93,1.4 2.86,2.33l0.97 0.97c0.17,0.21 0.05,0.18 0.31,0.34 -0.22,0.28 -3.19,1.76 -3.57,2.08 1.12,-0.35 2.03,-0.87 2.99,-1.36l2.78 -1.58c0.19,-0.13 0.25,-0.19 0.52,-0.22 0.08,0.32 1.11,2.57 1.23,3.1l-1.73 0.93c0.05,0.21 0.12,0.29 0.22,0.43l1.8 3.31c1.38,3.06 2.25,5.72 2.97,9.03 0.49,2.24 0.89,5.4 0.98,8.02z"/>
  <path class="fil1" d="M130.88 11.94c-0.13,0.12 -0.6,0.35 -0.78,0.45 -1.96,1.02 -3.25,2.04 -5.56,2.54 -0.22,-0.01 -0.16,-0.01 -0.35,0.1 0.06,0.82 3.61,10.28 4.43,12.68l1.56 4.12c0.23,0.58 0.41,1.09 0.64,1.66l2.33 5.73c0.12,0.3 0.2,0.52 0.34,0.81l3.21 7.07c0.26,0.52 0.47,1.11 0.74,1.55 0.17,0.28 0.27,0.48 0.41,0.75l1.2 2.25c0.09,0.19 0.11,0.21 0.21,0.37l1.26 2.11c0.09,0.14 0.13,0.23 0.22,0.36 0.73,1.13 1.21,1.7 1.93,2.68l0.52 0.63c0.2,0.21 0.39,0.35 0.55,0.59 0.17,0.23 0.39,0.35 0.6,0.56 1.4,1.42 3.73,2.47 5.69,1.41 0.16,-0.09 0.18,-0.12 0.35,-0.22 0.16,-0.09 0.04,0 0.18,-0.11l0.11 -0.1c0,0 0.02,-0.02 0.03,-0.03 0.43,-0.54 0.67,-0.5 1.46,-1.79 0.42,-0.67 0.78,-1.48 1.06,-2.26 0.13,-0.33 0.16,-0.29 0.96,-0.7l3.23 -1.76 0.16 -0.3c0.06,-0.15 0.1,-0.26 0.15,-0.43 0.09,-0.3 0.18,-0.58 0.25,-0.83 0.16,-0.6 0.33,-1.15 0.45,-1.78l0.96 -5.58c0.19,-1.08 0.28,-2.34 0.4,-3.41l0.14 -2.09c0.02,-0.27 0.07,-0.18 0.08,-0.5l0.21 -4.17c0.01,-0.4 0.07,-0.15 0.07,-1.01l0.08 -2.08c-0.01,-0.87 0.06,-0.69 0.07,-1.08 0.03,-0.7 -0.01,-1.45 -0.01,-2.16 0.01,-0.37 0.08,-0.55 0.08,-1l-0.01 -5.54c-0.17,-0.37 -1.39,-1.51 -1.66,-2.01 0.49,-0.51 1.5,-1.22 1.66,-1.44l0.01 -3.45c0,-0.49 -0.07,-0.67 -0.07,-1.08 0,-0.77 0,-1.54 0,-2.3 0,-0.48 -0.07,-0.71 -0.08,-1.08 0,-0.38 0.01,-0.77 0.01,-1.15 0,-1.48 -0.15,-2.99 -0.15,-4.46 0,-0.82 -0.07,-1.39 -0.07,-2.23 0,-0.48 -0.07,-0.66 -0.07,-1.08 0,-0.38 0,-0.77 0,-1.15l-0.15 0c-0.74,0 -1.47,0 -2.21,0l-0.19 0c-0.57,0 -0.48,0.05 -1.12,0.43l-3.52 1.94 0.14 3.31c0,0.62 0.07,1 0.07,1.65l0.08 1.66c-0.02,3.19 0.21,6.89 0.21,10.14l0 9.49c0,0.41 -0.07,0.46 -0.07,0.86 0,0.58 0,1.15 0,1.73l-0.07 2.52c0,0.45 -0.08,0.76 -0.08,1.65 0.01,0.4 -0.05,0.5 -0.07,0.79 -0.02,0.26 0.01,0.59 0.01,0.87 -0.01,0.36 -0.08,0.39 -0.08,0.78 0,0.33 0.01,0.52 -0.04,0.82l-0.18 2.42c0,0.39 -0.05,0.51 -0.07,0.79 -0.25,3.76 -0.76,7.62 -1.74,11.28 -0.11,0.42 -0.31,0.93 -0.41,1.38 -1.24,-0.83 -3.66,-4.57 -4.49,-6.09 -0.07,-0.14 -0.09,-0.2 -0.17,-0.33l-0.88 -1.57c-0.73,-1.24 -2.47,-4.99 -3.16,-6.54 -0.21,-0.44 -0.41,-0.84 -0.61,-1.34 -0.06,-0.14 -0.08,-0.15 -0.14,-0.29l-1.03 -2.42c-0.2,-0.47 -0.38,-0.88 -0.58,-1.36 -0.38,-0.95 -0.73,-1.81 -1.12,-2.76l-1.35 -3.47c-0.08,-0.23 -0.2,-0.47 -0.29,-0.72 -0.08,-0.23 -0.16,-0.41 -0.25,-0.68 -0.52,-1.52 -1.3,-3.36 -1.85,-4.98 -0.18,-0.51 -0.33,-0.93 -0.52,-1.42 -0.1,-0.25 -0.16,-0.48 -0.24,-0.7l-1.27 -3.62c-0.21,-0.61 -1.44,-3.98 -1.47,-4.36l-0.28 0.08z"/>
  <path class="fil2" d="M24.08 34.16c-0.18,-0.14 -0.38,-0.28 -0.55,-0.45 -0.1,-0.1 -0.16,-0.15 -0.25,-0.25l-0.71 -0.8c-0.79,-1 -1.28,-1.55 -2.02,-2.66 -0.1,-0.16 -0.14,-0.18 -0.24,-0.33 -0.16,-0.21 -0.26,-0.39 -0.41,-0.6l-2.76 -4.57c-0.14,-0.26 -0.22,-0.39 -0.36,-0.65 -0.1,-0.18 -0.1,-0.14 -0.19,-0.31l-0.39 -0.7c-0.84,-1.54 -2.85,-4.89 -3.88,-6.03 -0.67,-0.74 -1.39,-1.41 -2.47,-1.72 -4.18,-0.44 -4.58,5.49 -4.78,8.48 -0.5,7.21 0.5,18.12 1.19,25.47 0.38,4.06 0.93,8.08 1.33,12.15l2.91 -0.5c0.27,-0.07 0.26,-0.12 0.19,-0.47 -0.19,-1 -0.3,-2.7 -0.46,-3.79l-0.81 -7.6c-0.02,-0.42 -0.07,-0.88 -0.13,-1.24 -0.07,-0.44 -0.03,-0.91 -0.1,-1.34 -0.12,-0.78 -0.14,-1.77 -0.26,-2.54l-0.58 -7.83c-0.11,-0.87 0.03,-1.85 -0.12,-2.69l-0.11 -8.31c0.02,-0.27 0.08,-0.28 0.08,-0.65 0,-0.99 0.13,-1.48 0.14,-2.01 -0.04,-0.91 0.43,-3.22 0.87,-3.79 0.94,0.45 2.91,3.85 3.63,5.11 1.44,2.53 3.27,5.83 4.91,8.19 0.31,0.45 0.6,0.9 0.92,1.3 0.18,0.23 0.3,0.41 0.46,0.62 0.18,0.25 0.31,0.37 0.48,0.6l2.1 2.29c0.18,0.2 0.37,0.29 0.58,0.5 0.16,0.15 0.39,0.31 0.6,0.48 0.33,0.25 1,0.62 1.26,0.88 0.28,0.22 0.62,0.31 0.92,0.45 2.27,1.07 4.42,0.96 6.66,0 0.49,-0.2 1.71,-0.97 2.08,-1.3 0.6,-0.51 1.32,-1.04 1.8,-1.65l0.63 -0.74c0.67,-0.91 0.99,-1.19 1.76,-2.34l1.56 -2.53c0.45,-0.71 0.78,-1.47 1.19,-2.2 0.49,-0.89 0.97,-1.79 1.36,-2.73 0.08,-0.18 0.16,-0.32 0.24,-0.48l1.32 -2.78c0.64,-1.26 1.03,-2.28 1.78,-3.69 0.22,-0.67 0.91,-1.82 1.26,-2.41 0.43,-0.73 1.08,-1.75 1.68,-2.08 1.44,0.82 2.22,7.73 2.43,9.88 0.67,6.96 0.78,16.86 0.65,23.95 -0.04,1.97 -0.1,3.99 -0.11,5.96 -0.01,2.02 -0.16,4.05 -0.16,6.05 0.15,0.18 0.11,-0.01 0.72,-0.01l1.8 0.01c0.75,0 0.65,0.18 0.64,-1.16 0,-0.42 0.07,-0.49 0.08,-0.86 0,-0.62 -0.01,-1.25 -0.01,-1.87l0.08 -1.72c0,-0.51 -0.06,-1.31 0.02,-1.77 0.15,-0.79 0.05,-2.7 0.05,-3.63 0,-0.6 0.07,-1.05 0.07,-1.72l0 -9.06c0,-1.23 -0.07,-2.31 -0.07,-3.6l-0.07 -2.59c0,-0.42 -0.07,-0.49 -0.08,-0.86 -0.01,-1.24 -0.12,-2.33 -0.14,-3.53l-1.12 -9.73c-0.23,-1.15 -0.73,-3.25 -1.23,-4.24 -0.06,-0.13 -0.08,-0.15 -0.14,-0.29 -0.42,-1.01 -1.47,-2.36 -2.61,-2.49 -1.99,-0.24 -3.09,0.82 -4.21,2.34 -1.63,2.24 -4.3,8.07 -5.61,10.93 -0.98,2.14 -2.3,4.51 -3.51,6.49 -0.42,0.69 -0.88,1.33 -1.36,1.94 -2.09,2.7 -4.95,5.2 -8.52,3.23 -0.56,-0.31 -1.62,-1.03 -1.9,-1.41z"/>
  <path class="fil3" d="M71.39 54.65c-1.16,-0.62 -1.96,-1.23 -2.95,-2.07 -0.86,-0.73 -0.95,-0.87 -1.69,-1.62 -0.09,-0.08 -0.13,-0.12 -0.22,-0.21 -0.91,-0.95 -1.84,-2.51 -2.39,-3.72 -1.37,-3.01 -0.49,-6.06 1.25,-8.67 0.15,-0.22 0.23,-0.35 0.38,-0.57 0.55,-0.81 1.4,-1.8 2.09,-2.5 1.86,-1.86 3.43,-3.19 5.63,-4.66 1.97,-1.3 4.44,-2.7 6.57,-3.71l1.94 -0.87c0.22,-0.09 0.42,-0.18 0.65,-0.28l2 -0.81c0.25,-0.09 0.39,-0.2 0.69,-0.22l1.88 -0.73c0.6,-0.21 1.33,-0.47 1.94,-0.62 1.5,3.18 2.2,8.87 2.13,12.49 -0.1,4.55 -0.75,8.43 -2.14,12.42 -1.23,3.51 -3.46,7.11 -6.34,8.27 -1.93,0.78 -4.21,0.72 -6.29,0.22 -1.25,-0.3 -4.22,-1.35 -5.13,-2.14zm-7.84 -35.81l0.08 0.08c0.14,-0.19 0.52,-0.39 0.73,-0.51l2.54 -1.34c2.34,-1.19 6.48,-2.46 8.96,-2.55l2.53 0.06c0.22,0.04 0.43,0.05 0.58,0.07 0.23,0.04 0.4,0.06 0.56,0.07 1.9,0.29 3.6,1.2 4.83,2.1 0.64,0.46 0.52,0.45 0.94,0.78 0.63,0.5 1.92,2.08 2.32,2.82 -0.16,0.12 -2.98,1.07 -3.46,1.24 -1.15,0.43 -2.26,0.87 -3.37,1.38 -2.21,1.01 -4.34,2.02 -6.31,3.19 -2.07,1.23 -3.89,2.5 -5.63,3.87l-1.28 1.08c-0.77,0.6 -1.79,1.78 -2.38,2.37 -0.13,0.13 -0.17,0.13 -0.29,0.28 -0.11,0.13 -0.14,0.21 -0.26,0.33 -0.22,0.23 -0.34,0.37 -0.53,0.61 -0.35,0.43 -0.66,0.88 -1.01,1.36 -0.92,1.27 -1.89,3.26 -2.34,4.79 -1.17,4.04 0.08,7.78 2.41,10.89 0.55,0.74 0.72,0.85 1.08,1.29 0.93,1.14 1.02,1.06 1.8,1.8 0.23,0.21 0.34,0.32 0.6,0.55l0.69 0.53c1.12,0.9 3.3,2.08 3.53,2.27 1.2,0.77 4.86,1.87 6.16,2.07 0.61,0.09 1.18,0.16 1.85,0.15 3.01,0 5.07,-0.43 7.47,-2.31 0.15,-0.12 0.16,-0.1 0.32,-0.26 0.21,-0.2 0.33,-0.26 0.54,-0.46l2.69 -3.42 0.75 -1.34c1.91,-3.82 3.26,-8.62 3.55,-12.92 0.02,-0.28 0.05,-0.14 0.07,-0.43 0.15,-2.14 0.14,-3.42 0.15,-5.53 0,-0.46 -0.08,-0.64 -0.08,-1.01l-0.14 -1.87c-0.09,-1.84 -1.17,-6.8 -1.94,-8.41 0.45,-0.11 1.62,-0.47 2.01,-0.51l-0.5 -3.16c-0.1,-0.11 0.02,-0.04 -0.15,-0.04l-2.79 0.69c-0.23,-0.49 -0.57,-1 -0.84,-1.4l-0.9 -1.26 -1.42 -1.53c-0.91,-0.92 -2.24,-1.89 -3.42,-2.48 -0.38,-0.18 -1.78,-0.85 -2.13,-0.88 -0.91,-0.22 -1.66,-0.47 -2.66,-0.59 -4.76,-0.56 -8.97,0.64 -13.25,2.51 -0.85,0.37 -3.59,1.71 -4.15,2.25 0.21,0.6 1.26,2.14 1.49,2.73z"/>
  <path class="fil4" d="M110.02 60.47l2.66 -1.15 -2.63 -7.79c-0.41,-1.2 -2.12,-7.55 -2.19,-8.31 -0.27,-0.69 -0.52,-2.28 -0.69,-3.12 -0.29,-1.44 -1.63,-8.64 -1.61,-9.61 -0.13,-0.27 -0.61,-4.53 -0.71,-5.47 -0.04,-0.31 -0.03,-1.11 -0.12,-1.61 -0.07,-0.36 0.01,-0.73 -0.06,-1.09 -0.12,-0.65 -0.13,-4.13 0.01,-5 0.03,-0.2 0,-0.38 0.02,-0.57l0.45 -3c0.47,-2.29 1.63,-4.71 3.23,-5.9 1.42,-1.06 3.04,-1.82 4.88,-1.95 0.49,-0.04 0.2,-0.08 1.07,-0.08 0.36,0 0.88,0.06 1.08,0.05 2.66,0.32 5.42,1.91 6.17,3.85 0.95,2.41 -1.13,5.8 -2.1,7.36 -2.2,3.54 -5.95,8.45 -7.65,12.2 -2.53,5.62 -2.95,10.23 0.56,15.45 0.74,1.1 1.38,1.71 2.31,2.65 0.8,0.81 1.77,1.61 2.69,2.27 0.91,0.66 1.93,1.33 3,1.96l3.22 1.75c0.25,0.21 1.44,0.65 1.77,0.81 1.28,0.61 2.37,1.01 3.67,1.52l0.93 0.35c0.33,0.13 0.62,0.26 0.96,0.34 0.03,-0.3 0.38,-1.1 0.5,-1.45l0.51 -1.43c-0.53,-0.13 -2.25,-0.97 -2.88,-1.21l-1.91 -0.83c-0.6,-0.26 -1.27,-0.41 -1.97,-0.77 -2.09,-1.05 -5.04,-2.57 -6.81,-4.11 -1.31,-1.14 -0.85,-0.63 -2.19,-1.98 -0.48,-0.47 -0.85,-0.94 -1.26,-1.47 -0.21,-0.27 -0.36,-0.53 -0.55,-0.82 -2.45,-3.67 -1.87,-8.03 0.03,-11.82l3.55 -6.01 4.34 -6.59c0.89,-1.42 1.68,-3.17 2.13,-4.77 0.55,-1.97 0.28,-3.98 -0.7,-5.69 -0.09,-0.16 -0.15,-0.26 -0.25,-0.4 -1.11,-1.45 -2.57,-2.57 -4.28,-3.26 -0.36,-0.15 -0.7,-0.3 -1.05,-0.39 -0.73,-0.15 -1.37,-0.4 -2.16,-0.5 -2.41,-0.29 -4.49,0.1 -6.62,1 -2.47,1.03 -4.2,2.74 -5.4,4.96 -3.77,6.99 -1.91,19.08 -0.48,27.1 1.22,6.81 1.93,10.22 3.88,16.83 0.39,1.29 0.83,2.62 1.28,3.9l1.37 3.8z"/>
  <path class="fil5" d="M110.02 60.47l-1.37 -3.8c-0.45,-1.28 -0.89,-2.61 -1.28,-3.9 -1.95,-6.61 -2.66,-10.02 -3.88,-16.83 -1.43,-8.02 -3.29,-20.11 0.48,-27.1 1.2,-2.22 2.93,-3.93 5.4,-4.96 2.13,-0.9 4.21,-1.29 6.62,-1 0.79,0.1 1.43,0.35 2.16,0.5 -0.02,-0.01 -0.04,-0.05 -0.04,-0.04 -0.01,0.02 -0.03,-0.02 -0.04,-0.03 -0.12,-0.06 -0.04,-0.02 -0.15,-0.07l-3.97 -1.7c-1.24,-0.49 -3.79,-1.09 -5.11,-0.85l-1.35 0.16c-0.49,0.08 -0.8,0.13 -1.25,0.26 -0.72,0.2 -2.11,0.71 -2.69,1.05l-0.5 0.29c-0.14,0.08 -0.3,0.19 -0.44,0.28 -0.15,0.11 -0.31,0.19 -0.47,0.32l-0.59 0.49c-0.29,0.27 -0.59,0.4 -1.02,0.99 -0.45,0.63 -0.59,0.55 -1.27,1.75 -0.31,0.54 -0.79,1.45 -0.99,2.03 -0.54,1.63 -1.06,3.1 -1.19,4.92l-0.22 2.01c-0.01,0.25 0.02,0.55 0,0.8l-0.07 1.43c0,0.51 0,1.01 0,1.51l1.12 11.04 0.88 5.22c0.51,3.3 1.32,6.8 2.13,10.03 0.79,3.19 2.59,9.12 4.02,12.67 0.2,0.49 -0.04,0.41 0.77,0.73l3.17 1.36c0.23,0.09 0.32,0.15 0.55,0.24 0.23,0.09 0.3,0.18 0.59,0.2z"/>
  <path class="fil6" d="M70.87 58.25c-0.23,-0.19 -2.41,-1.37 -3.53,-2.27l-0.69 -0.53c-0.26,-0.23 -0.37,-0.34 -0.6,-0.55 -0.78,-0.74 -0.87,-0.66 -1.8,-1.8 -0.36,-0.44 -0.53,-0.55 -1.08,-1.29 -2.33,-3.11 -3.58,-6.85 -2.41,-10.89 0.45,-1.53 1.42,-3.52 2.34,-4.79 0.35,-0.48 0.66,-0.93 1.01,-1.36 0.19,-0.24 0.31,-0.38 0.53,-0.61 0.12,-0.12 0.15,-0.2 0.26,-0.33 0.12,-0.15 0.16,-0.15 0.29,-0.28 0.59,-0.59 1.61,-1.77 2.38,-2.37l1.28 -1.08c1.74,-1.37 3.56,-2.64 5.63,-3.87 1.97,-1.17 4.1,-2.18 6.31,-3.19 1.11,-0.51 2.22,-0.95 3.37,-1.38 0.48,-0.17 3.3,-1.12 3.46,-1.24 -0.4,-0.74 -1.69,-2.32 -2.32,-2.82 -0.42,-0.33 -0.3,-0.32 -0.94,-0.78 -1.23,-0.9 -2.93,-1.81 -4.83,-2.1 0.12,0.2 1.24,1.02 1.74,1.66 0.09,0.12 0.04,0.09 0.15,0.21l1.27 1.75c-0.31,0.07 -0.61,0.19 -0.92,0.29 -2.01,0.67 -5.17,1.87 -6.96,2.75 -1.12,0.56 -2.41,1.08 -3.48,1.7 -0.15,0.09 -0.2,0.14 -0.4,0.24 -1.76,0.87 -5.22,3.21 -6.66,4.35 -0.07,0.06 -0.07,0.08 -0.15,0.14l-0.9 0.75c-0.17,0.14 -0.18,0.12 -0.35,0.29 -0.17,0.17 -0.2,0.16 -0.36,0.29l-1.96 1.92c-0.2,0.28 -0.42,0.42 -0.63,0.67 -0.14,0.16 -0.12,0.19 -0.29,0.36 -0.17,0.17 -0.16,0.18 -0.29,0.35l-0.29 0.36c-2.67,3.39 -4.61,7.64 -3.28,12.1 0.39,1.28 1.27,3.23 2.14,4.34l2.37 2.81c0.16,0.15 0.2,0.14 0.36,0.28l1.36 1.22c1.95,1.64 4.7,3 7.06,3.95l0.91 0.39c0.19,0.08 0.69,0.33 0.9,0.36z"/>
  <path class="fil7" d="M7.59 61.19c-0.4,-4.07 -0.95,-8.09 -1.33,-12.15 -0.69,-7.35 -1.69,-18.26 -1.19,-25.47 0.2,-2.99 0.6,-8.92 4.78,-8.48 -0.13,-0.1 -0.1,-0.08 -0.28,-0.14 -0.13,-0.06 -0.19,-0.09 -0.34,-0.16l-2.62 -1.12c-0.26,-0.1 -0.42,-0.2 -0.65,-0.29 -0.46,-0.17 -0.88,-0.44 -1.5,-0.44 -1.25,0 -2.01,0.53 -2.55,1.27 -0.28,0.38 -0.51,0.75 -0.68,1.19 -0.48,1.24 -1,3.47 -1.02,4.73 -0.01,0.86 -0.21,2.3 -0.21,3.6l0.07 6.54c0,0.84 0.05,0.54 0.08,0.94 0.02,0.28 -0.01,0.64 -0.01,0.94l1.92 21.81c0.03,0.18 0.01,0.23 0.03,0.4 0.09,1.31 0.46,3.46 0.57,4.75 0.48,0.11 4.19,1.79 4.93,2.08z"/>
  <path class="fil7" d="M45.45 18.41c0.09,0 0.45,3.48 0.5,3.89 0.03,0.33 0.03,1.1 0.13,1.73 0.03,0.21 0,0.43 0.01,0.64 0.01,0.32 0.07,0.25 0.08,0.57 0.01,0.21 -0.02,0.44 -0.01,0.65 0.02,0.41 0.08,0.33 0.08,1.22 0,0.34 0.04,0.35 0.06,0.58 0.05,0.35 -0.01,0.85 0.01,1.22 0.01,0.4 0.07,0.34 0.07,1.22 0,0.9 0.07,1.53 0.07,2.44 0,1.71 0.07,3.28 0.07,5.04l0.01 8.84c0,0.43 -0.08,0.71 -0.08,1.23 0,1.76 -0.07,3.33 -0.07,5.03 0,1.51 -0.14,3.45 -0.14,4.96 0.43,0.1 2.21,0.93 2.78,1.17 0.12,0.06 0.2,0.08 0.31,0.12l1.87 0.8c0,-2 0.15,-4.03 0.16,-6.05 0.01,-1.97 0.07,-3.99 0.11,-5.96 0.13,-7.09 0.02,-16.99 -0.65,-23.95 -0.21,-2.15 -0.99,-9.06 -2.43,-9.88 -0.6,0.33 -1.25,1.35 -1.68,2.08 -0.35,0.59 -1.04,1.74 -1.26,2.41z"/>
  <path class="fil8" d="M105.56 30.49c-0.02,0.97 1.32,8.17 1.61,9.61 0.17,0.84 0.42,2.43 0.69,3.12 0.1,0.07 0.29,0.3 0.38,0.41 0.57,0.74 1.26,1.45 1.98,2.05 1.05,0.89 1.43,1.34 2.7,2.18l2.95 1.87c0.2,0.12 0.33,0.16 0.52,0.27 0.22,0.14 0.32,0.19 0.56,0.31l5.48 2.57c0.34,0.14 0.86,0.45 1.18,0.48l-3.22 -1.75c-1.07,-0.63 -2.09,-1.3 -3,-1.96 -0.92,-0.66 -1.89,-1.46 -2.69,-2.27 -0.93,-0.94 -1.57,-1.55 -2.31,-2.65 -3.51,-5.22 -3.09,-9.83 -0.56,-15.45 1.7,-3.75 5.45,-8.66 7.65,-12.2 0.97,-1.56 3.05,-4.95 2.1,-7.36 -0.75,-1.94 -3.51,-3.53 -6.17,-3.85 0.9,1.01 1.44,1.45 1.44,3.19 0,2.28 -1.92,5.37 -3.21,7.29 -0.17,0.26 -0.3,0.46 -0.46,0.69l-2.84 4.2c-1.87,2.81 -3.68,5.76 -4.66,9.01l-0.12 0.24z"/>
  <path class="fil9" d="M85.34 24.74l0.5 2.39c0.08,0.46 0.11,0.79 0.17,1.27l0.21 2.02c-0.01,0.36 0.04,0.41 0.07,0.65 0.04,0.37 0,1.03 0,1.43 0,0.26 -0.01,0.44 0.03,0.7l-0.03 2.11c0,0.35 -0.04,0.41 -0.07,0.65 -0.02,0.22 0.02,0.49 -0.01,0.71 -0.04,0.4 -0.1,0.85 -0.14,1.3 -0.24,3.43 -1.67,8.31 -3.25,11.34l-0.53 0.91c-0.77,1.34 -2.19,3.01 -3.5,3.76 -1.71,0.98 -2.75,1.03 -4.8,1.03 -0.49,0 -0.87,-0.03 -1.32,-0.11l-1.28 -0.25c0.91,0.79 3.88,1.84 5.13,2.14 2.08,0.5 4.36,0.56 6.29,-0.22 2.88,-1.16 5.11,-4.76 6.34,-8.27 1.39,-3.99 2.04,-7.87 2.14,-12.42 0.07,-3.62 -0.63,-9.31 -2.13,-12.49 -0.61,0.15 -1.34,0.41 -1.94,0.62l-1.88 0.73z"/>
  <path class="fil10" d="M24.08 34.16c0.28,0.38 1.34,1.1 1.9,1.41 3.57,1.97 6.43,-0.53 8.52,-3.23 0.48,-0.61 0.94,-1.25 1.36,-1.94 1.21,-1.98 2.53,-4.35 3.51,-6.49 1.31,-2.86 3.98,-8.69 5.61,-10.93 1.12,-1.52 2.22,-2.58 4.21,-2.34 -0.02,-0.01 -0.04,-0.05 -0.04,-0.04l-0.49 -0.22c-0.21,-0.09 -0.39,-0.17 -0.6,-0.26l-2.3 -1.01c-1.27,-0.54 -2.35,-1.1 -3.85,-0.14 -0.43,0.28 -0.56,0.41 -0.9,0.76 -1.4,1.39 -1.74,2.32 -2.68,3.93 -0.11,0.18 -0.19,0.3 -0.29,0.51l-2.95 6.18c-0.18,0.37 -0.33,0.74 -0.53,1.13 -0.38,0.76 -0.72,1.44 -1.1,2.2l-0.84 1.61c-0.12,0.21 -0.16,0.36 -0.29,0.57l-0.89 1.55c-0.55,0.86 -1.38,2.22 -2.01,2.95 -0.34,0.4 -1.22,1.5 -1.56,1.75 -0.85,0.64 -1.45,1.45 -3.07,1.89 -0.25,0.07 -0.53,0.07 -0.72,0.16z"/>
  <path class="fil11" d="M63.55 18.84c-0.23,-0.59 -1.28,-2.13 -1.49,-2.73 0.56,-0.54 3.3,-1.88 4.15,-2.25 4.28,-1.87 8.49,-3.07 13.25,-2.51 1,0.12 1.75,0.37 2.66,0.59l-0.32 -0.19c-0.17,-0.07 -0.19,-0.07 -0.35,-0.15 -0.24,-0.12 -0.47,-0.21 -0.7,-0.31l-2.88 -1.21c-1.6,-0.56 -1.49,-0.52 -3.27,-0.83 -2.4,-0.42 -5.94,-0.01 -8.2,0.63 -0.3,0.08 -0.54,0.14 -0.85,0.23l-4.43 1.68c-0.55,0.28 -1.51,0.67 -2.07,1.02l-2.03 1.14 1.54 2.71c0.15,0.18 1.6,0.73 1.96,0.91 0.34,0.17 0.66,0.27 1.01,0.43l2.02 0.84z"/>
  <path class="fil7" d="M8.34 22.22l0.53 0.91c0.09,0.17 0.11,0.18 0.19,0.31 0.07,0.12 0.09,0.2 0.17,0.33 1.32,2.16 2.03,3.52 3.61,5.88l1.49 2.04c0.12,0.14 0.1,0.16 0.21,0.29l0.65 0.79c0.08,0.1 0.16,0.16 0.25,0.25 0.1,0.1 0.17,0.16 0.25,0.26 0.61,0.78 0.9,0.92 1.51,1.51 0.15,0.14 0.15,0.11 0.29,0.22 0.11,0.08 0.15,0.15 0.26,0.24 0.09,0.07 0.19,0.14 0.29,0.21 0.64,0.49 1.15,0.78 1.88,1.14 1.14,0.57 2.77,1.16 3.86,1.68 0.17,0.08 0.15,0.1 0.37,0.12 -0.26,-0.26 -0.93,-0.63 -1.26,-0.88 -0.21,-0.17 -0.44,-0.33 -0.6,-0.48 -0.21,-0.21 -0.4,-0.3 -0.58,-0.5l-2.1 -2.29c-0.17,-0.23 -0.3,-0.35 -0.48,-0.6 -0.16,-0.21 -0.28,-0.39 -0.46,-0.62 -0.32,-0.4 -0.61,-0.85 -0.92,-1.3 -1.64,-2.36 -3.47,-5.66 -4.91,-8.19 -0.72,-1.26 -2.69,-4.66 -3.63,-5.11 -0.44,0.57 -0.91,2.88 -0.87,3.79z"/>
  <path class="fil12" d="M170.49 43.04c-0.34,-1.13 0.49,-3.85 0.99,-5.02 1,-2.36 1.9,-3.33 3.23,-5.11 0.74,-1 2.14,-2.34 3.03,-3.23l2.23 -1.94c0.2,-0.19 0.34,-0.27 0.56,-0.44 0.82,-0.62 1.47,-1.18 2.39,-1.79l1.85 -1.24c0.26,-0.23 -0.05,0.17 0.11,-0.16 -0.42,0.17 -1.25,0.64 -1.62,0.87l-0.76 0.46c-1.47,0.81 -2.8,1.78 -4.17,2.67l-5.16 4.26 -3.08 3.4c-1.25,1.73 -2.27,2.93 -3.09,5.31 -0.55,1.61 -0.7,2.39 -0.7,4.26l0.97 -0.54c0.12,-0.08 0.07,-0.08 0.21,-0.15 0.49,-0.26 2.74,-1.56 3.01,-1.61z"/>
  <path class="fil13" d="M150.7 59.9c0.29,-0.06 3.06,-1.67 3.4,-1.87l0.79 -0.5c1.04,-0.76 2.52,-3.37 2.52,-4.14l-3.23 1.76c-0.8,0.41 -0.83,0.37 -0.96,0.7 -0.28,0.78 -0.64,1.59 -1.06,2.26 -0.79,1.29 -1.03,1.25 -1.46,1.79z"/>
  <path class="fil14" d="M190.94 58.75c0.24,-0.07 0.33,-0.18 0.55,-0.29l1.8 -1.01c0.22,-0.11 0.34,-0.2 0.6,-0.33 0.23,-0.11 0.37,-0.21 0.59,-0.34 0.76,-0.46 1.51,-1.02 2.06,-1.68l0.87 -1.01c0.34,-0.44 1.24,-1.85 1.34,-2.43l-2.66 1.46c-0.12,0.07 -0.2,0.13 -0.32,0.19 -1.27,0.66 -1.04,0.52 -1.46,1.35 -0.38,0.75 -1,1.73 -1.48,2.26 -0.91,1.02 -0.87,0.95 -1.89,1.83z"/>
  <path class="fil15" d="M166.18 14.55c0.41,-0.12 1.98,-0.87 2.95,-1.18 1.11,-0.35 2.16,-0.62 3.36,-0.83 2.39,-0.42 1.08,0.29 3.83,-1.31 0.14,-0.09 0.19,-0.1 0.33,-0.18 0.12,-0.06 0.25,-0.17 0.35,-0.22l0.8 -0.43c0.12,-0.06 0.03,-0.02 0.18,-0.1 0.29,-0.16 0.19,-0.04 0.33,-0.3 -0.52,0 -1.29,0.13 -1.84,0.22 -2.98,0.46 -6.4,2 -8.99,3.52l-0.97 0.54c-0.28,0.14 -0.2,0.05 -0.33,0.27z"/>
  <path class="fil16" d="M93.62 18.8l-0.52 -0.3c-0.57,-0.26 -3.76,-1.65 -4.01,-1.67l0.9 1.26c0.27,0.4 0.61,0.91 0.84,1.4l2.79 -0.69z"/>
  <path class="fil17" d="M161.16 21.79l3.92 -2.18 1.15 -0.93c0.24,-0.2 1.4,-1.01 1.53,-1.21 -1.19,0.5 -2.53,1.3 -3.52,1.95 -0.59,0.39 -1.06,0.73 -1.6,1.13 -0.52,0.39 -1.05,0.81 -1.48,1.24z"/>
  <path class="fil18" d="M124.54 14.93c2.31,-0.5 3.6,-1.52 5.56,-2.54 0.18,-0.1 0.65,-0.33 0.78,-0.45l-3.33 1.2 -2.93 1.6c-0.04,0.04 -0.05,0.13 -0.08,0.19z"/>
  <path class="fil17" d="M192.65 16.32c-0.22,0.28 -3.19,1.76 -3.57,2.08 1.12,-0.35 2.03,-0.87 2.99,-1.36l2.78 -1.58c-0.22,0.02 -0.86,0.3 -1.08,0.41 -0.19,0.09 -0.39,0.16 -0.56,0.23 -0.23,0.09 -0.34,0.17 -0.56,0.22z"/>
 </g>
  </SvgIcon>
);
3
  • En que sitio o despues de que elemento quieres cargar la imagen?
    – Suso
    Commented el 12 may. 2023 a las 11:00
  • @Suso En el espacio que esta arriba de la opción "Dashboard" donde se ve el icono de cierre, en ese espacio en blanco. Commented el 12 may. 2023 a las 16:19
  • @ArmandoVázquez, esta difícil darte una respuesta sin poder probar. Me parece (no estoy seguro) que la imagen debería ir antes o después de <ChevronLeftIcon />.
    – Marcos
    Commented el 12 may. 2023 a las 18:59

4 respuestas 4

1
+50

tienes la imagen guardadada? primero importa tu archivo svg

import { SvgIcon } from "@material-ui/core";

crea una constante fuera del makeStyles y pon la url de tu logo

    const LogoIcon = (props) => (
     <SvgIcon {...props}>
      <image href="URL_DEL_LOGOTIPO.svg" />
     </SvgIcon>
    );

despues dentro de tu funcion principal del componente en luga de ScgIcon usa LogoIcon, remplazalo. te dejo codigo donde deberia darte algo de solucion

   <Typography
    component="h1"
    variant="h6"
    color="inherit"
    noWrap
    className={classes.title}
   >
   <LogoIcon className={classes.logo} /> {/* Reemplaza SvgIcon con LogoIcon 
   */}
   titulo de tu app
   </Typography> 
1
import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";

import {
  makeStyles,
  Drawer,
  AppBar,
  Toolbar,
  List,
  Typography,
  Divider,
  MenuItem,
  IconButton,
  Menu,
  SvgIcon, // Agrega SvgIcon de Material-UI //
} from "@material-ui/core";

import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import AccountCircle from "@material-ui/icons/AccountCircle";

import MainListItems from "./MainListItems";
import NotificationsPopOver from "../components/NotificationsPopOver";
import UserModal from "../components/UserModal";
import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading";
import { i18n } from "../translate/i18n";

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    height: "100vh",
    [theme.breakpoints.down("sm")]: {
      height: "calc(100vh - 56px)",
    },
  },

  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  toolbarIcon: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    padding: "0 8px",
    minHeight: "48px",
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: 36,
  },
  menuButtonHidden: {
    display: "none",
  },
  title: {
    flexGrow: 1,
  },
  drawerPaper: {
    position: "relative",
    whiteSpace: "nowrap",
    width: drawerWidth,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerPaperClose: {
    overflowX: "hidden",
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    width: theme.spacing(7),
    [theme.breakpoints.up("sm")]: {
      width: theme.spacing(9),
    },
  },
  appBarSpacer: {
    minHeight: "48px",
  },
  content: {
    flex: 1,
    overflow: "auto",
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
  },
  paper: {
    padding: theme.spacing(2),
    display: "flex",
    overflow: "auto",
    flexDirection: "column",
  },
  logo: { // Agrega estilos para el logo
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginRight: theme.spacing(2),
  },
}));

// Defini tu icono SVG como un componente de React //
const LogoIcon = (props) => (
  <SvgIcon {...

Proba de esta forma, espero que te sirva. Saludos

3
  • Hola Armando! No, no podes agregarlo para poder utilizar una imagen como un icono en React, es necesario importarla y luego utilizarla como un componente. No es posible simplemente agregar un link de la imagen y utilizarla como un icono.
    – Agos M
    Commented el 14 may. 2023 a las 21:36
  • O como sería usando en vez de un SVG una PNG común? es más sencillo? Commented el 15 may. 2023 a las 16:09
  • Gracias por tu contribución, revisar Cómo responder, saludos.
    – Jorgesys
    Commented el 15 may. 2023 a las 19:35
0

Al final si te creaste un componente donde vas a tener tu foto del logo puedes manejar obtener la imagen con la etiqueta <img>. Puedes en el componente ponerlo de la siguiente forma

<img
   className="h-36 w-36 rounded-full "
   src={
         imageUrl ? imageUrl : DefaultImageUrl
       } alt="logo"
/>
-1

puedes usar una imagen agregandole al atributo src la url relativa o absoluta. Vamos que si la tienes descargada puede ser una ruta local o poner el enlace que sea.

<div classname="clase-imagen" onClick={()=>console.log("pulsado")}>
    <img src="https://fldasfjlasdfsal.com" />
</div>

Luego darle las propiedades que desees al componente div ya sea ancho, alto, etc. También le puedes agregar el evento onclick para que haga algo cuando lo pulses...

1
  • Entiendo, pero eso en un PHP o HTML es super facil, el problema es que en React me parece no es igual, porque si lo intente y no logre hacer que funcionara. Commented el 15 may. 2023 a las 16:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.