Phi
Phi
DicehubLogo
@dicehub/phiv1.0.0-beta.1

DicehubLogo

Official dicehub logo component with glyph and full logo variants.

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

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

Installation

Barrel

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

Granular

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

Usage

<script setup>
import { DicehubLogo } from "@dicehub/phi/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/phi/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/phi/components/dicehub-logo";
</script>

<template>
  <div class="flex flex-wrap items-center gap-8">
    <DicehubLogo color="color" style="width: 7rem;" />
    <div class="rounded-lg bg-white p-4">
      <DicehubLogo color="black" style="width: 7rem;" />
    </div>
    <div class="rounded-lg bg-black p-4">
      <DicehubLogo color="white" style="width: 7rem;" />
    </div>
  </div>
</template>

Glyph Color Variants

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

<template>
  <div class="flex flex-wrap items-center gap-8">
    <DicehubLogo variant="glyph" color="color" style="width: 3rem;" />
    <div class="rounded-lg bg-white p-4">
      <DicehubLogo variant="glyph" color="black" style="width: 3rem;" />
    </div>
    <div class="rounded-lg bg-black p-4">
      <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/phi/components/dicehub-logo";
</script>

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

Brand Assets Menu

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

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/phi/components/button";
import {
  DicehubLogo,
  generateDicehubLogoSvg,
} from "@dicehub/phi/components/dicehub-logo";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@dicehub/phi/components/dropdown";

const copied = ref(null);

const copyToClipboard = async (text, label) => {
  await navigator.clipboard.writeText(text);
  copied.value = label;
};
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <Button variant="primary">
        <DicehubLogo variant="glyph" color="white" style="width: 1.5rem;" />
        Logo
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem
        value="glyph"
        @click="copyToClipboard(generateDicehubLogoSvg({ variant: 'glyph' }), 'glyph')"
      >
        {{ copied === "glyph" ? "Copied!" : "Copy mark as SVG" }}
      </DropdownMenuItem>
      <DropdownMenuItem
        value="full"
        @click="copyToClipboard(generateDicehubLogoSvg({ variant: 'full' }), 'full')"
      >
        {{ copied === "full" ? "Copied!" : "Copy full logo as SVG" }}
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="guidelines">Visit brand guidelines</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

PoweredByDicehub

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

Basic Usage

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

<template>
  <PoweredByDicehub />
</template>

Color Variants

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

<template>
  <div class="flex flex-wrap items-center gap-4">
    <PoweredByDicehub />
    <PoweredByDicehub color="black" />
    <div class="rounded-lg bg-black p-3">
      <PoweredByDicehub color="white" />
    </div>
  </div>
</template>
<script setup>
import { PoweredByDicehub } from "@dicehub/phi/components/dicehub-logo";
</script>

<template>
  <footer class="flex w-full items-center justify-between rounded-lg border px-6 py-4">
    <span>© 2026 Your Company. All rights reserved.</span>
    <PoweredByDicehub />
  </footer>
</template>

SVG Generation

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

import { generateDicehubLogoSvg } from "@dicehub/phi/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. Safe external value is applied by default.