Web Component

The <quikturn-logo> web component works in any framework (or no framework) and handles rendering, attribution, and styling via Shadow DOM.

Installation

npm install @quikturn/logos

Usage

Import the element registration once, then use the custom element anywhere:

<script type="module">
  import "@quikturn/logos/element";
</script>

<quikturn-logo domain="github.com" token="pk_live_xxx" size="64"></quikturn-logo>

The element auto-registers as <quikturn-logo> on import.

Attributes

Attribute	Type	Required	Description
`domain`	`string`	Yes	Company domain
`token`	`string`	No	Publishable key (can inherit from context)
`size`	`number`	No	Pixel width (default: 128)
`format`	`"png" \| "jpeg" \| "webp" \| "avif"`	No	Image format
`greyscale`	`boolean`	No	Presence attribute — add to enable
`theme`	`"light" \| "dark"`	No	Background variant

Examples

<!-- Basic -->
<quikturn-logo domain="stripe.com" token="pk_live_xxx"></quikturn-logo>

<!-- With options -->
<quikturn-logo
  domain="github.com"
  token="pk_live_xxx"
  size="128"
  format="webp"
  theme="dark"
></quikturn-logo>

<!-- Greyscale (boolean attribute) -->
<quikturn-logo
  domain="linear.app"
  token="pk_live_xxx"
  greyscale
></quikturn-logo>

Shadow DOM

The web component uses Shadow DOM to encapsulate its styles and protect the attribution badge (required on the Free tier).

The attribution badge uses !important CSS rules within the Shadow DOM to prevent removal. Upgrade to a paid plan to remove attribution.

Framework Examples

Astro

---
// Component renders on the client
---
<script>
  import "@quikturn/logos/element";
</script>

<quikturn-logo domain="stripe.com" token="pk_live_xxx" size="64" />

Svelte

<script>
  import "@quikturn/logos/element";
</script>

<quikturn-logo domain="stripe.com" token="pk_live_xxx" size="64" />

Vue

<script setup>
import "@quikturn/logos/element";
</script>

<template>
  <quikturn-logo domain="stripe.com" token="pk_live_xxx" size="64" />
</template>

When to Use

Use the web component when:

You need a framework-agnostic solution
You're working with web components, Lit, or vanilla HTML
You want built-in attribution handling via Shadow DOM

For React apps, prefer the React SDK for better integration with React's rendering model.

On this page