Logo

Le thème affiche un logo dans l’en-tête de chaque site de documentation.

Ressources de logo disponibles

Le thème inclut deux fichiers de logo dans le répertoire assets/ :

Fichier	Format	Description
assets/f5-logo.svg	SVG	Logo F5 en rouge Cloud (#e4002b)
assets/github-avatar.png	PNG	Avatar de l’organisation GitHub (par défaut)

Logo par défaut

Le logo par défaut est défini dans la fabrique createF5xcDocsConfig dans config.ts :

const logo = options.logo || { src: '@f5-sales-demo/docs-theme/assets/github-avatar.png' };

Si aucune option logo n’est fournie, l’avatar GitHub au format PNG est utilisé. Le chemin est un spécificateur de paquet npm résolu via la carte exports dans package.json.

Remplacer le logo

Option 1 : Utiliser le logo SVG F5

Passez l’option logo à createF5xcDocsConfig :

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: '@f5-sales-demo/docs-theme/assets/f5-logo.svg' },
});

Option 2 : Utiliser un logo personnalisé

Placez votre fichier de logo dans le dépôt de contenu et référencez-le :

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: './src/assets/my-logo.svg' },
});

Option 3 : Logos distincts pour les modes clair et sombre

Starlight prend en charge des logos distincts pour les modes clair et sombre :

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: {
    light: './src/assets/logo-light.svg',
    dark: './src/assets/logo-dark.svg',
  },
});

Recommandations

• Utilisez le format SVG — les images matricielles (PNG, JPG) fonctionnent, mais ne s’adaptent pas proprement à toutes les tailles
• Incluez un attribut viewBox — garantit que le logo s’adapte proportionnellement (ex. : viewBox="0 0 100 100")
• Limitez la taille du fichier — le logo se charge sur chaque page ; visez moins de 10 Ko
• Testez dans les deux thèmes — vérifiez que le logo s’affiche correctement en modes clair et sombre