@forcir/logo-element

Forcir logo as vanilla JavaScript custom elements. No frameworks, no build step—types are hand-written .d.ts files and the package types field points at them.

Elements

• <forcir-logo /> — Full lockup (brandmark + wordmark)
• <forcir-brandmark /> — Icon only
• <forcir-wordmark /> — Wordmark only

All use Shadow DOM (open) and support the same attributes and CSS variables.

This package is intended for browser environments (including bundlers that target the browser). The elements use HTMLElement and Shadow DOM.

Installation

npm install @forcir/logo-element
# or
pnpm add @forcir/logo-element

Usage

Script tag

<script type="module" src="node_modules/@forcir/logo-element/src/index.js"></script>
<forcir-logo />
<forcir-brandmark height="24" />
<forcir-wordmark />

ES module

import "@forcir/logo-element";
// Elements are now registered: <forcir-logo>, <forcir-brandmark>, <forcir-wordmark>

Or use the classes programmatically:

import { ForcirLogoElement, ForcirBrandmarkElement, ForcirWordmarkElement } from "@forcir/logo-element";
// Use with customElements.define or document.createElement after registration

Using in React

Import the package once (e.g. in your root component or layout) so the custom elements are registered; then use the tags in any component. Your bundler will resolve the ESM package as usual.

// In your app entry or layout (once)
import "@forcir/logo-element";

function Header() {
  return (
    <header>
      <a href="/">
        <forcir-logo height={24} />
      </a>
    </header>
  );
}

• Attributes: Pass height as a number; React will set the attribute on the DOM node. Use className and style as usual (e.g. style={{ ["--forcir-logo-foreground"]: "oklch(0.2 0 0)" }}).

• TypeScript: To type the custom elements in JSX, reference the included declaration so <forcir-logo /> is valid. In your tsconfig.json add to "include" (or add a /// <reference /> in a .d.ts file):

  "include": ["src", "node_modules/@forcir/logo-element/src/react.d.ts"]

  Your project must have @types/react installed. Then you get typed props (e.g. height?: number) and refs for the custom elements.

Attributes

| Attribute | Type | Default | Description | |----------|--------|---------|--------------------------| | height | number | 18 | SVG height in pixels |

Example: <forcir-brandmark height="24" />

CSS variables (pass-through)

Set these on the custom element or any ancestor so they inherit into the shadow root:

| Variable | Description | Used by | |----------------------------|--------------------------------|----------------| | --forcir-logo-foreground | Main logo colour | All variants | | --forcir-logo-muted | Secondary colour (brandmark) | Brandmark only |

Example:

forcir-logo {
  --forcir-logo-foreground: oklch(0.2 0 0);
  --forcir-logo-muted: oklch(0.5 0 0);
}

OKLCH and fallback

The component uses OKLCH for default colours when the browser supports it, with an rgba fallback when OKLCH is not supported. Internal defaults use the --forcir-internal-* namespace; you only need to set the public --forcir-logo-* variables to customize. No JavaScript colour conversion—everything is handled in CSS via @supports.

License

UNLICENSED