Logo

O tema exibe um logotipo no cabeçalho de cada site de documentação.

Ativos de Logotipo Disponíveis

O tema inclui dois arquivos de logotipo no diretório assets/:

Arquivo	Formato	Descrição
assets/f5-logo.svg	SVG	Logotipo F5 em Cloud Red (#e4002b)
assets/github-avatar.png	PNG	Avatar da organização no GitHub (padrão)

Logotipo Padrão

O logotipo padrão é definido na fábrica createF5xcDocsConfig em config.ts:

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

Se nenhuma opção logo for fornecida, o PNG do avatar do GitHub será utilizado. O caminho é um especificador de pacote npm resolvido por meio do mapa exports em package.json.

Substituindo o Logotipo

Opção 1: Usar o logotipo SVG do F5

Passe a opção logo para createF5xcDocsConfig:

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

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

Opção 2: Usar um logotipo personalizado

Coloque o arquivo de logotipo no repositório de conteúdo e faça referência a ele:

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

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

Opção 3: Logotipos separados para modo claro e escuro

O Starlight suporta logotipos separados para o modo claro e escuro:

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',
  },
});

Diretrizes

• Use o formato SVG — imagens raster (PNG, JPG) funcionarão, mas não escalarão corretamente em todos os tamanhos
• Inclua um viewBox — garante que o logotipo seja dimensionado proporcionalmente (ex.: viewBox="0 0 100 100")
• Mantenha o tamanho do arquivo pequeno — o logotipo é carregado em todas as páginas; procure manter abaixo de 10 KB
• Teste nos dois temas — verifique se o logotipo aparece corretamente nos modos claro e escuro