Installation

Barrel

import { CloudflareLogo, PoweredByCloudflare } from 'kumo-svelte';

Granular

import { CloudflareLogo, PoweredByCloudflare } from 'kumo-svelte/components/cloudflare-logo';

Usage

<script lang="ts">  import { CloudflareLogo } from 'kumo-svelte';</script><CloudflareLogo class="w-36" />

Examples

Glyph Only

Use variant="glyph" to display just the cloud icon without the wordmark.

Color Variants

The logo supports three color schemes: brand colors, black, and white.

Glyph Color Variants

Sizing

Size the logo using CSS width classes. The height adjusts automatically to maintain aspect ratio.

Brand Assets Menu

Combine with DropdownMenu to create a brand assets menu. Use generateCloudflareLogoSvg() to get copy-paste ready SVG markup.

PoweredByCloudflare

A pre-built "Powered by Cloudflare" badge component for footers and attribution.

Basic Usage

Color Variants

Footer Example

SVG Generation

Use generateCloudflareLogoSvg() to get copy-paste ready SVG markup for non-React contexts.

import { generateCloudflareLogoSvg } from "kumo-svelte";// Generate glyph SVG (cloud only)const glyphSvg = generateCloudflareLogoSvg({ variant: "glyph" });// Generate full logo SVGconst fullSvg = generateCloudflareLogoSvg({ variant: "full" });// Generate black logoconst blackSvg = generateCloudflareLogoSvg({ color: "black" });// Copy to clipboardawait navigator.clipboard.writeText(  generateCloudflareLogoSvg({ variant: "glyph", color: "color" }),);

API Reference

CloudflareLogo extends SVGSVGElement and accepts all standard SVG attributes.

CloudflareLogo.PoweredByCloudflare

Extends HTMLAnchorElement and accepts all standard anchor attributes.