feat: use dynamic custom logo

packages/web/src/components/Logo/index.tsx

@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CustomLogo from 'components/CustomLogo/index.ee';
+import useConfig from 'hooks/useConfig';
+
+const Logo = () => {
+  const { config, loading } = useConfig(['logo.svgData']);
+
+  const logoSvgData = config?.['logo.svgData'] as string;
+  if (loading && !logoSvgData) return (<React.Fragment />);
+
+  if (logoSvgData) return <CustomLogo />;
+
+  return (
+    <Typography variant="h6" component="h1" noWrap>
+      <FormattedMessage id="brandText" />
+    </Typography>
+  );
+};
+
+export default Logo;

packages/web/src/components/Logo/style.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Link = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+  color: 'inherit',
+  display: 'inline-flex',
+}));