Skip to content
Kappa
Kappa
DicehubLogo
@dicehub/kappav0.4.2

DicehubLogo

Official dicehub logo component with glyph and full logo variants.

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <DicehubLogo style="width: 18rem;" />
</template>

Installation

Barrel

import {
  DicehubLogo,
  PoweredByDicehub,
  generateDicehubLogoSvg,
} from "@dicehub/kappa";

Granular

import {
  DicehubLogo,
  PoweredByDicehub,
  generateDicehubLogoSvg,
} from "@dicehub/kappa/components/dicehub-logo";

Usage

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <DicehubLogo style="width: 9rem;" />
</template>

Examples

Glyph Only

Use variant="glyph" to display just the dicehub mark without the wordmark.

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <DicehubLogo variant="glyph" style="width: 6rem;" />
</template>

Color Variants

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

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;">
    <DicehubLogo color="color" style="width: 7rem;" />
    <div style="padding: 1rem; border-radius: 0.5rem; background: white;">
      <DicehubLogo color="black" style="width: 7rem;" />
    </div>
    <div style="padding: 1rem; border-radius: 0.5rem; background: black;">
      <DicehubLogo color="white" style="width: 7rem;" />
    </div>
  </div>
</template>

Glyph Color Variants

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;">
    <DicehubLogo variant="glyph" color="color" style="width: 3rem;" />
    <div style="padding: 1rem; border-radius: 0.5rem; background: white;">
      <DicehubLogo variant="glyph" color="black" style="width: 3rem;" />
    </div>
    <div style="padding: 1rem; border-radius: 0.5rem; background: black;">
      <DicehubLogo variant="glyph" color="white" style="width: 3rem;" />
    </div>
  </div>
</template>

Sizing

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

<script setup>
import { DicehubLogo } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem;">
    <DicehubLogo style="width: 5rem;" />
    <DicehubLogo style="width: 7rem;" />
    <DicehubLogo style="width: 11rem;" />
  </div>
</template>

Brand Assets Menu

Combine the logo with a native disclosure menu. Use generateDicehubLogoSvg() to get copy-paste ready SVG markup.

<script setup>
import { ref } from "vue";
import {
  DicehubLogo,
  generateDicehubLogoSvg,
} from "@dicehub/kappa/components/dicehub-logo";

const copied = ref(null);

const copyToClipboard = async (variant) => {
  await navigator.clipboard.writeText(generateDicehubLogoSvg({ variant }));
  copied.value = variant;
};

const downloadLogo = () => {
  const blob = new Blob([generateDicehubLogoSvg()], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "dicehub-logo.svg";
  link.click();
  window.setTimeout(() => URL.revokeObjectURL(url), 0);
};
</script>

<template>
  <details>
    <summary>
      <DicehubLogo variant="glyph" color="white" style="width: 1.5rem;" />
      Logo
    </summary>
    <button type="button" @click="copyToClipboard('glyph')">
      {{ copied === "glyph" ? "Copied!" : "Copy mark as SVG" }}
    </button>
    <button type="button" @click="copyToClipboard('full')">
      {{ copied === "full" ? "Copied!" : "Copy full logo as SVG" }}
    </button>
    <button type="button" @click="downloadLogo">Download brand assets</button>
    <a href="https://dicehub.com" target="_blank" rel="noopener noreferrer">
      Visit brand guidelines
    </a>
  </details>
</template>

PoweredByDicehub

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

Basic Usage

<script setup>
import { PoweredByDicehub } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <PoweredByDicehub />
</template>

Color Variants

<script setup>
import { PoweredByDicehub } from "@dicehub/kappa/components/dicehub-logo";
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;">
    <PoweredByDicehub />
    <PoweredByDicehub color="black" />
    <div style="padding: 0.75rem; border-radius: 0.5rem; background: black;">
      <PoweredByDicehub color="white" />
    </div>
  </div>
</template>

SVG Generation

Use generateDicehubLogoSvg() to get copy-paste ready SVG markup for non-Vue contexts.

import { generateDicehubLogoSvg } from "@dicehub/kappa/components/dicehub-logo";

// Generate mark SVG
const glyphSvg = generateDicehubLogoSvg({ variant: "glyph" });

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

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

// Copy to clipboard
await navigator.clipboard.writeText(
  generateDicehubLogoSvg({ variant: "glyph", color: "color" }),
);

API Reference

DicehubLogo renders an SVG and accepts standard SVG attributes.

DicehubLogo

PropTypeDefaultDescription
variant"glyph" | "full""full"Logo variant. Glyph shows just the dicehub mark, full includes the wordmark.
color"color" | "black" | "white""color"Color scheme. Color uses dicehub ink, black and white are solid options.
titlestring"dicehub logo"Accessible label for the SVG.

PoweredByDicehub

Extends HTMLAnchorElement and accepts standard anchor attributes.

PropTypeDefaultDescription
color"color" | "black" | "white""color"Color scheme for the mark and badge text.
hrefstring"https://dicehub.com"Link destination.
targetstring"_blank"Anchor target.
relstring"noopener noreferrer"Anchor relationship. A safe external value is applied by default.