CloudflareLogo
@cloudflare/kumo

CloudflareLogo

官方 Cloudflare 标识组件，提供图形标志与完整标识两种变体。

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 { 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 copyToClipboard = async (text: string, label: string) => {
    await navigator.clipboard.writeText(text);
    setCopied(label);
    setTimeout(() => setCopied(null), 2000);
  };

  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” 徽章组件，用于页脚和署名场景。

基本用法

Powered by Cloudflare
import { PoweredByCloudflare } from "@cloudflare/kumo";

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

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

颜色变体

Powered by CloudflarePowered by Cloudflare
Powered by Cloudflare
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() 可为非 React 场景获取可直接复制粘贴的 SVG 标记。

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

// Generate glyph SVG (cloud only)
const glyphSvg = generateCloudflareLogoSvg({ variant: "glyph" });

// Generate full logo SVG
const fullSvg = generateCloudflareLogoSvg({ variant: "full" });

// Generate black logo
const blackSvg = generateCloudflareLogoSvg({ color: "black" });

// Copy to clipboard
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 为纯色。
classNamestring-用于设置尺寸的 CSS 类（例如 w-36）。高度会自动调整。

PoweredByCloudflare

继承 HTMLAnchorElement，并接受所有标准锚点属性。

属性类型默认值说明
color”color” | “black” | “white""color”标识与文本的配色方案。
hrefstring”https://www.cloudflare.com”链接地址。默认在新标签页中打开。