CloudflareLogo

<script lang="ts">
  import { CloudflareLogo } from "kumo-svelte/components/cloudflare-logo";
</script>

<CloudflareLogo class="w-72" />

<script lang="ts">
  import { CloudflareLogo } from "kumo-svelte/components/cloudflare-logo";
</script>

<CloudflareLogo variant="glyph" class="w-24" />

<script lang="ts">
  import { CloudflareLogo } from "kumo-svelte/components/cloudflare-logo";
</script>

<div class="flex flex-wrap items-center gap-8">
  <CloudflareLogo class="w-28" color="color" />
  <div class="rounded-lg bg-white p-4">
    <CloudflareLogo class="w-28" color="black" />
  </div>
  <div class="rounded-lg bg-black p-4">
    <CloudflareLogo class="w-28" color="white" />
  </div>
</div>

<script lang="ts">
  import { CloudflareLogo } from "kumo-svelte/components/cloudflare-logo";
</script>

<div class="flex flex-wrap items-center gap-8">
  <CloudflareLogo variant="glyph" class="w-12" color="color" />
  <div class="rounded-lg bg-white p-4">
    <CloudflareLogo variant="glyph" class="w-12" color="black" />
  </div>
  <div class="rounded-lg bg-black p-4">
    <CloudflareLogo variant="glyph" class="w-12" color="white" />
  </div>
</div>

<script lang="ts">
  import { CloudflareLogo } from "kumo-svelte/components/cloudflare-logo";
</script>

<div class="flex flex-wrap items-end gap-6">
  <CloudflareLogo class="w-20" />
  <CloudflareLogo class="w-28" />
  <CloudflareLogo class="w-44" />
</div>

<script lang="ts">
  import { CloudflareLogo, generateCloudflareLogoSvg } from "kumo-svelte/components/cloudflare-logo";
  import * as DropdownMenu from "kumo-svelte/components/dropdown";
  import ArrowSquareOutIcon from "phosphor-svelte/lib/ArrowSquareOutIcon";
  import CloudIcon from "phosphor-svelte/lib/CloudIcon";
  import CodeIcon from "phosphor-svelte/lib/CodeIcon";
  import DownloadSimpleIcon from "phosphor-svelte/lib/DownloadSimpleIcon";

  let copied = $state<string | null>(null);

  function resetCopiedSoon() {
    setTimeout(() => {
      copied = null;
    }, 2000);
  }

  async function copyToClipboard(text: string, label: string) {
    await navigator.clipboard.writeText(text);
    copied = label;
    resetCopiedSoon();
  }

  function openExternal(url: string) {
    window.open(url, "_blank", "noopener");
  }
</script>

{#snippet cloudIcon()}
  <CloudIcon />
{/snippet}

{#snippet codeIcon()}
  <CodeIcon />
{/snippet}

{#snippet downloadIcon()}
  <DownloadSimpleIcon />
{/snippet}

{#snippet externalIcon()}
  <ArrowSquareOutIcon />
{/snippet}

<div class="flex items-center gap-4">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class="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" class="w-8" />
          <span class="font-medium">Logo</span>
        </button>
      {/snippet}
    </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={downloadIcon}
        onclick={() => openExternal("https://www.cloudflare.com/press-kit/")}
      >
        Download brand assets
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item
        icon={externalIcon}
        onclick={() => openExternal("https://www.cloudflare.com/brand-assets/")}
      >
        Visit brand guidelines
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <span class="text-sm text-kumo-subtle">Click to open the brand assets menu</span>
</div>

<script lang="ts">
  import { PoweredByCloudflare } from "kumo-svelte/components/cloudflare-logo";
</script>

<PoweredByCloudflare />

<script lang="ts">
  import { PoweredByCloudflare } from "kumo-svelte/components/cloudflare-logo";
</script>

<div class="flex flex-wrap items-center gap-4">
  <PoweredByCloudflare />
  <PoweredByCloudflare color="black" />
  <div class="rounded-lg bg-black p-3">
    <PoweredByCloudflare color="white" />
  </div>
</div>

<script lang="ts">
  import { PoweredByCloudflare } from "kumo-svelte/components/cloudflare-logo";
</script>

<footer
  class="flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4"
>
  <span class="text-sm text-kumo-subtle">
    © 2026 Your Company. All rights reserved.
  </span>
  <PoweredByCloudflare />
</footer>