Templates Help Hire Us

Checkout Pro Version

react React Version angular Angular Version vue VueJs Version next NextJs Version react NuxtJs Version bootstrap Bootstrap Version
Get Pro
All Access Pass

Change Logo

Change Logo

To change logo : /main/src/layouts/full/shared/logo/Logo.tsx
Put the logo image into the assets/images/logos folder. 
                    
import { FC, useContext } from 'react';
import { Link } from 'react-router';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { ReactComponent as LogoDark } from 'src/assets/images/logos/dark-logo.svg';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { ReactComponent as LogoDarkRTL } from 'src/assets/images/logos/dark-rtl-logo.svg';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { ReactComponent as LogoLight } from 'src/assets/images/logos/light-logo.svg';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { ReactComponent as LogoLightRTL } from 'src/assets/images/logos/light-logo-rtl.svg';
import { styled } from '@mui/material';
import config from 'src/context/config';
import { CustomizerContext } from 'src/context/CustomizerContext';
                              
const Logo: FC = () => {
  const { isCollapse, isSidebarHover, activeDir, activeMode } = useContext(CustomizerContext);
  const TopbarHeight = config.topbarHeight;
      
  const LinkStyled = styled(Link)(() => ({
    height: TopbarHeight,
    width: isCollapse == "mini-sidebar" && !isSidebarHover ? '40px' : '180px',
    overflow: 'hidden',
    display: 'block',
  }));
                              
if (activeDir === 'ltr') {
  return (
    <LinkStyled to="/" style={{
      display: 'flex',
      alignItems: 'center',
    }}>
      {activeMode === 'dark' ? (
        <LogoLight />
      ) : (
        <LogoDark />
      )}
    </LinkStyled>
  );
}
                              
  return (
    <LinkStyled to="/" style={{
      display: 'flex',
      alignItems: 'center',
        }}>
          {activeMode === 'dark' ? (
        <LogoDarkRTL />
        ) : (
          <LogoLightRTL />
        )}
      </LinkStyled>
  );
};
                    
export default Logo;

Change Logo

To change logo : src/app/layouts/full/sidebar/branding.component.ts
Put the logo image into the assets/images/logos folder. 
                            
import { Component } from '@react/core';
import { CoreService } from 'src/app/services/core.service';

@Component({
selector: 'app-branding',
imports: [],
template: `
  <a href="/" class="logodark">
    <img
      src="./assets/images/logos/dark-logo.svg"
      class="align-middle m-2"
      alt="logo"
    />
  </a>
`,
})
export class BrandingComponent {
options = this.settings.getOptions();
constructor(private settings: CoreService) {}
}