CloudflareLogo - Kumo 中文文档

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoBasicDemo() {
  return <CloudflareLogo className="w-72" />;
}

安装

批量导入

import {
  CloudflareLogo,
  PoweredByCloudflare,
  generateCloudflareLogoSvg,
} from "@cloudflare/kumo";

细粒度导入

import {
  CloudflareLogo,
  PoweredByCloudflare,
  generateCloudflareLogoSvg,
} from "@cloudflare/kumo/components/cloudflare-logo";

用法

import { CloudflareLogo } from "@cloudflare/kumo";

export default function Example() {
  return <CloudflareLogo className="w-36" />;
}

示例

仅图标

使用 variant=“glyph” 可仅显示云朵图标，不显示文字标识。

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoGlyphDemo() {
  return <CloudflareLogo variant="glyph" className="w-24" />;
}

颜色变体

徽标支持三种配色方案：品牌色、黑色和白色。

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <CloudflareLogo className="w-28" color="color" />
      <div className="rounded-lg bg-white p-4">
        <CloudflareLogo className="w-28" color="black" />
      </div>
      <div className="rounded-lg bg-black p-4">
        <CloudflareLogo className="w-28" color="white" />
      </div>
    </div>
  );
}

图标颜色变体

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoGlyphVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <CloudflareLogo variant="glyph" className="w-12" color="color" />
      <div className="rounded-lg bg-white p-4">
        <CloudflareLogo variant="glyph" className="w-12" color="black" />
      </div>
      <div className="rounded-lg bg-black p-4">
        <CloudflareLogo variant="glyph" className="w-12" color="white" />
      </div>
    </div>
  );
}

尺寸调整

使用 CSS 宽度类调整徽标尺寸，高度会自动调整以保持宽高比。

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoSizesDemo() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <CloudflareLogo className="w-20" />
      <CloudflareLogo className="w-28" />
      <CloudflareLogo className="w-44" />
    </div>
  );
}

结合 DropdownMenu 可创建品牌资源菜单。使用 generateCloudflareLogoSvg() 可获取可直接复制粘贴的 SVG 标记。

Click to open the brand assets menu

import { useEffect, useRef, useState } from "react";
import { CloudflareLogo, DropdownMenu, generateCloudflareLogoSvg } from "@cloudflare/kumo";
import { CloudIcon, CodeIcon, DownloadSimpleIcon, ArrowSquareOutIcon } from "@phosphor-icons/react";

export function CloudflareLogoCopyDemo() {
  const [copied, setCopied] = useState<string | null>(null);
  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const copyAttemptRef = useRef(0);

  useEffect(() => {
    return () => {
      copyAttemptRef.current += 1;
      if (resetTimeoutRef.current !== null) {
        clearTimeout(resetTimeoutRef.current);
        resetTimeoutRef.current = null;
      }
    };
  }, []);

  const copyToClipboard = async (text: string, label: string) => {
    const attempt = ++copyAttemptRef.current;
    if (resetTimeoutRef.current !== null) {
      clearTimeout(resetTimeoutRef.current);
      resetTimeoutRef.current = null;
    }

    try {
      await navigator.clipboard.writeText(text);
      if (copyAttemptRef.current !== attempt) return;

      setCopied(label);
      resetTimeoutRef.current = setTimeout(() => {
        if (copyAttemptRef.current !== attempt) return;
        setCopied(null);
        resetTimeoutRef.current = null;
      }, COPIED_FEEDBACK_MS);
    } catch (error) {
      if (copyAttemptRef.current !== attempt) return;

      setCopied(null);
      console.error("Failed to copy logo SVG:", error);
    }
  };

  return (
    <div className="flex items-center gap-4">
      <DropdownMenu>
        <DropdownMenu.Trigger>
          <button
            type="button"
            className="flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80"
          >
            <CloudflareLogo variant="glyph" color="white" className="w-8" />
            <span className="font-medium">Logo</span>
          </button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item
            icon={CloudIcon}
            onClick={() =>
              copyToClipboard(
                generateCloudflareLogoSvg({ variant: "glyph" }),
                "glyph",
              )
            }
          >
            {copied === "glyph" ? "Copied!" : "Copy logo as SVG"}
          </DropdownMenu.Item>
          <DropdownMenu.Item
            icon={CodeIcon}
            onClick={() =>
              copyToClipboard(
                generateCloudflareLogoSvg({ variant: "full" }),
                "full",
              )
            }
          >
            {copied === "full" ? "Copied!" : "Copy full logo as SVG"}
          </DropdownMenu.Item>
          <DropdownMenu.Item
            icon={DownloadSimpleIcon}
            onClick={() =>
              window.open(
                "https://www.cloudflare.com/press-kit/",
                "_blank",
                "noopener",
              )
            }
          >
            Download brand assets
          </DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item
            icon={ArrowSquareOutIcon}
            onClick={() =>
              window.open(
                "https://www.cloudflare.com/brand-assets/",
                "_blank",
                "noopener",
              )
            }
          >
            Visit brand guidelines
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>

      <span className="text-sm text-kumo-subtle">
        Click to open the brand assets menu
      </span>
    </div>
  );
}

PoweredByCloudflare

一个预构建的「Powered by Cloudflare」徽章组件，适用于页脚和署名场景。

基本用法

import { PoweredByCloudflare } from "@cloudflare/kumo";

// =============================================================================
// PoweredByCloudflare Demos
// =============================================================================

export function PoweredByCloudflareBasicDemo() {
  return <PoweredByCloudflare />;
}

颜色变体

import { PoweredByCloudflare } from "@cloudflare/kumo";

export function PoweredByCloudflareVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <PoweredByCloudflare />
      <PoweredByCloudflare color="black" />
      <div className="rounded-lg bg-black p-3">
        <PoweredByCloudflare color="white" />
      </div>
    </div>
  );
}

页脚示例

import { PoweredByCloudflare } from "@cloudflare/kumo";

export function PoweredByCloudflareFooterDemo() {
  return (
    <footer className="flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4">
      <span className="text-sm text-kumo-subtle">
        &copy; 2026 Your Company. All rights reserved.
      </span>
      <PoweredByCloudflare />
    </footer>
  );
}

SVG 生成

使用 generateCloudflareLogoSvg() 可获取可直接复制粘贴的 SVG 标记，适用于非 React 环境。

import { generateCloudflareLogoSvg } from "@cloudflare/kumo";

// 生成图标 SVG(仅云朵)
const glyphSvg = generateCloudflareLogoSvg({ variant: "glyph" });

// 生成完整徽标 SVG
const fullSvg = generateCloudflareLogoSvg({ variant: "full" });

// 生成黑色徽标
const blackSvg = generateCloudflareLogoSvg({ color: "black" });

// 复制到剪贴板
await navigator.clipboard.writeText(
  generateCloudflareLogoSvg({ variant: "glyph", color: "color" }),
);

API 参考

CloudflareLogo 继承自 SVGSVGElement,接受所有标准 SVG 属性。

属性	类型	默认值	说明
variant	”glyph” \| “full"	"full”	徽标变体。`glyph` 仅显示云朵图标，`full` 包含文字标识。
color	”color” \| “black” \| “white"	"color”	配色方案。`color` 使用品牌色，`black` 和 `white` 为纯色。
className	string	-	用于控制尺寸的 CSS 类 (如 `w-36`),高度会自动调整。

PoweredByCloudflare

继承自 HTMLAnchorElement,接受所有标准锚点属性。

属性	类型	默认值	说明
color	”color” \| “black” \| “white"	"color”	徽标与文字的配色方案。
href	string	”https://www.cloudflare.com”	链接目标，默认在新标签页中打开。