✨(frontend) load docs logo from public folder via url instead of svg

allows logo override at deploy-time using k8s configmaps and static assets Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to
 - 🐛(backend) filter invitation with case insensitive email
 - 🐛(frontend) reduce no access image size from 450 to 300 #1463
 - 🐛(frontend) preserve interlink style on drag-and-drop in editor #1460
+- ✨(frontend) load docs logo from public folder via url #1462
 
 ## [3.7.0] - 2025-09-12
 

src/backend/impress/configuration/theme/default.json

@@ -125,5 +125,12 @@
  }
  }
  }
+ },
+ "header": {
+ "logo": {
+ "src": "/assets/icon-docs.svg",
+ "width": "32px",
+ "alt": "Docs"
+ }
  }
 }

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -131,3 +131,27 @@ test.describe('Header: Log out', () => {
  await expectLoginPage(page);
  });
 });
+
+test.describe('Header: Override configuration', () => {
+ test('checks the header is correctly overrided', async ({ page }) => {
+ await overrideConfig(page, {
+ FRONTEND_THEME: 'dsfr',
+ theme_customization: {
+ header: {
+ logo: {
+ src: '/assets/logo-gouv.svg',
+ width: '220px',
+ alt: 'Gouvernement Logo',
+ },
+ },
+ },
+ });
+
+ await page.goto('/');
+ const header = page.locator('header').first();
+
+ await expect(header.getByAltText('Gouvernement Logo')).toBeVisible();
+
+ await expect(header.getByAltText('Docs')).toBeHidden();
+ });
+});

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -4,11 +4,13 @@ import { Resource } from 'i18next';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Theme } from '@/cunningham/';
 import { FooterType } from '@/features/footer';
+import { HeaderType } from '@/features/header/types';
 import { PostHogConf } from '@/services';
 
 interface ThemeCustomization {
  footer?: FooterType;
  translations?: Resource;
+ header?: HeaderType;
 }
 
 export interface ConfigResponse {

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -1,8 +1,9 @@
+import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import IconDocs from '@/assets/icons/icon-docs.svg';
 import { Box, StyledLink } from '@/components/';
+import { useConfig } from '@/core/config';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
 import { LanguagePicker } from '@/features/language';
@@ -16,9 +17,14 @@ import { Title } from './Title';
 
 export const Header = () => {
  const { t } = useTranslation();
+ const { data: config } = useConfig();
  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
  const { isDesktop } = useResponsiveStore();
 
+ const logo = config?.theme_customization?.header?.logo;
+
+ const styleWidth = logo?.width || '32px';
+
  return (
  <Box
  as="header"
@@ -60,12 +66,18 @@ export const Header = () => {
  $height="fit-content"
  $margin={{ top: 'auto' }}
  >
- <IconDocs
- data-testid="header-icon-docs"
- width={32}
- color={colorsTokens['primary-text']}
- aria-hidden="true"
- />
+ {logo?.src && (
+ <Image
+ className="c__image-system-filter"
+ data-testid="header-icon-docs"
+ src={logo.src}
+ alt={logo?.alt || t('Logo')}
+ width={32}
+ height={32}
+ style={{ width: styleWidth, height: 'auto' }}
+ priority
+ />
+ )}
  <Title headingLevel="h1" aria-hidden="true" />
  </Box>
  </StyledLink>

src/frontend/apps/impress/src/features/header/types.ts

@@ -0,0 +1,8 @@
+export interface HeaderType {
+ logo?: {
+ src: string;
+ width?: string;
+ alt?: string;
+ withTitle?: boolean;
+ };
+}