ロゴ

テーマは、すべてのドキュメントサイトのサイトヘッダーにロゴを表示します。

利用可能なロゴアセット

テーマには assets/ ディレクトリに2つのロゴファイルが同梱されています。

ファイル	フォーマット	説明
assets/f5-logo.svg	SVG	クラウドレッド（#e4002b）の F5 ロゴ
assets/github-avatar.png	PNG	GitHub 組織アバター（デフォルト）

デフォルトロゴ

デフォルトロゴは config.ts の createF5xcDocsConfig ファクトリに設定されています。

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

logo オプションが指定されない場合、GitHub アバター PNG が使用されます。パスは package.json の exports マップを通じて解決される npm パッケージ指定子です。

ロゴの置き換え

オプション 1: F5 SVG ロゴを使用する

createF5xcDocsConfig に logo オプションを渡します。

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

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

オプション 2: カスタムロゴを使用する

コンテンツリポジトリにロゴファイルを配置し、参照します。

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

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

オプション 3: ライトモードとダークモードで別々のロゴを使用する

Starlight はライトモードとダークモードで別々のロゴをサポートしています。

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

ガイドライン

• SVG フォーマットを使用する — ラスター画像（PNG、JPG）も使用できますが、すべてのサイズで綺麗にスケールしません
• viewBox を含める — ロゴが比例してスケールされることを保証します（例: viewBox="0 0 100 100"）
• ファイルサイズを小さく保つ — ロゴはすべてのページで読み込まれます。10 KB 未満を目安にしてください
• 両方のテーマでテストする — ライトモードとダークモードの両方でロゴが正しく表示されることを確認してください