denis
/
uchill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use custom logo files — logo.svg (expanded) / favicon.png (mini) 

- Logo component now renders logo.svg (full) or favicon.png (icon) from /logo/
- nav-vertical: mini mode passes mini prop → favicon.png
- animate-logo (splash screen): uses favicon.png icon with animation ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dev Server 2026-03-12 16:52:33 +03:00
parent 75d6072309
commit a39a76f7a5
3 changed files with 32 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front_minimal/src/components/animate/animate-logo.jsx
View File

@ -33,7 +33,7 @@ export function AnimateLogo1({ logo, sx, ...other }) {
}} }}
sx={{ display: 'inline-flex' }} sx={{ display: 'inline-flex' }}
> >
{logo ?? <Logo disableLink width={64} height={64} />} {logo ?? <Logo disableLink width={64} height={64} mini />}
</Box> </Box>
<Box <Box

85
front_minimal/src/components/logo/logo.jsx
View File

@ -1,82 +1,53 @@
import { useId, forwardRef } from 'react'; import { forwardRef } from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import NoSsr from '@mui/material/NoSsr'; import NoSsr from '@mui/material/NoSsr';
import { useTheme } from '@mui/material/styles';
import { CONFIG } from 'src/config-global';
import { RouterLink } from 'src/routes/components'; import { RouterLink } from 'src/routes/components';
import { logoClasses } from './classes'; import { logoClasses } from './classes';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
export const Logo = forwardRef( /**
({ width = 40, height = 40, disableLink = false, className, href = '/', sx, ...other }, ref) => { * mini=false (default) → full logo (logo.svg)
const theme = useTheme(); * mini=true → icon only (favicon.png)
const gradientId = useId();
const PRIMARY_LIGHT = theme.vars.palette.primary.light;
const PRIMARY_MAIN = theme.vars.palette.primary.main;
const PRIMARY_DARK = theme.vars.palette.primary.dark;
/*
* OR using local (public folder)
* const logo = ( <Box alt="logo" component="img" src={`${CONFIG.site.basePath}/logo/logo-single.svg`} width={width} height={height} /> );
*/ */
export const Logo = forwardRef(
({ width, height, mini = false, disableLink = false, className, href = '/', sx, ...other }, ref) => {
const logo = ( const defaultWidth = mini ? 40 : 134;
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"> const defaultHeight = mini ? 40 : 40;
<defs>
<linearGradient id={`${gradientId}-1`} x1="100%" x2="50%" y1="9.946%" y2="50%">
<stop offset="0%" stopColor={PRIMARY_DARK} />
<stop offset="100%" stopColor={PRIMARY_MAIN} />
</linearGradient>
<linearGradient id={`${gradientId}-2`} x1="50%" x2="50%" y1="0%" y2="100%"> const w = width ?? defaultWidth;
<stop offset="0%" stopColor={PRIMARY_LIGHT} /> const h = height ?? defaultHeight;
<stop offset="100%" stopColor={PRIMARY_MAIN} />
</linearGradient>
<linearGradient id={`${gradientId}-3`} x1="50%" x2="50%" y1="0%" y2="100%"> const logo = mini ? (
<stop offset="0%" stopColor={PRIMARY_LIGHT} /> <Box
<stop offset="100%" stopColor={PRIMARY_MAIN} /> component="img"
</linearGradient> alt="logo icon"
</defs> src={`${CONFIG.site.basePath}/logo/favicon.png`}
sx={{ width: w, height: h, objectFit: 'contain' }}
<g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
<path
fill={`url(#${`${gradientId}-1`})`}
d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
/> />
<path ) : (
fill={`url(#${`${gradientId}-2`})`} <Box
d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994" component="img"
alt="logo"
src={`${CONFIG.site.basePath}/logo/logo.svg`}
sx={{ width: w, height: h, objectFit: 'contain' }}
/> />
<path
fill={`url(#${`${gradientId}-3`})`}
d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
/>
</g>
</svg>
); );
return ( return (
<NoSsr <NoSsr
fallback={ fallback={
<Box <Box
width={width} width={w}
height={height} height={h}
className={logoClasses.root.concat(className ? ` ${className}` : '')} className={logoClasses.root.concat(className ? ` ${className}` : '')}
sx={{ sx={{ flexShrink: 0, display: 'inline-flex', verticalAlign: 'middle', ...sx }}
flexShrink: 0,
display: 'inline-flex',
verticalAlign: 'middle',
...sx,
}}
/> />
} }
> >
@ -84,8 +55,8 @@ export const Logo = forwardRef(
ref={ref} ref={ref}
component={RouterLink} component={RouterLink}
href={href} href={href}
width={width} width={w}
height={height} height={h}
className={logoClasses.root.concat(className ? ` ${className}` : '')} className={logoClasses.root.concat(className ? ` ${className}` : '')}
aria-label="logo" aria-label="logo"
sx={{ sx={{

2
front_minimal/src/layouts/dashboard/nav-vertical.jsx
View File

@ -35,7 +35,7 @@ export function NavVertical({ sx, data, slots, isNavMini, layoutQuery, onToggleN
<> <>
{slots?.topArea ?? ( {slots?.topArea ?? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 2.5 }}> <Box sx={{ display: 'flex', justifyContent: 'center', py: 2.5 }}>
<Logo /> <Logo mini />
</Box> </Box>
)} )}