Web Components

npm install @pictum/web

pnpm add @pictum/web

bun add @pictum/web

yarn add @pictum/web

<script type="module">
  import { definePictumElements } from "@pictum/web";

  definePictumElements();
</script>

<pictum-icon
  name="devicon:html5"
  alt="HTML5"
  class="size-6"
></pictum-icon>

import { icon } from "@pictum/web";

// Generate the URL without making a request.
const url = icon("devicon:html5").url;

// Fetch canonical SVG markup.
const svg = await icon("devicon:html5").svg();

<script type="module">
  import { definePictumElements } from "@pictum/web";

  definePictumElements();
</script>

<pictum-avatar
  seed="customer-123"
  variant="portrait"
  gender="female"
  format="webp"
  size="256"
  alt="Customer"
  class="size-10"
></pictum-avatar>

import { avatar } from "@pictum/web";

// Generate the URL without making a request.
const url = avatar("customer-123", {
  variant: "portrait",
  gender: "female",
  format: "webp",
}).url;

// Fetch canonical SVG markup.
const svg = await avatar("ada-lovelace", {
  variant: "monogram",
}).svg();

<script type="module">
  import { definePictumElements } from "@pictum/web";

  definePictumElements();
</script>

<pictum-qr-code
  value="https://pictum.dev"
  format="svg"
  quiet-zone="false"
  foreground="#4c1d95ff"
  background="#ede9fe"
  alt="Open Pictum"
  class="size-32"
></pictum-qr-code>

import { qrCode } from "@pictum/web";

// Generate the URL without making a request.
const url = qrCode("https://pictum.dev", {
  format: "svg",
  quietZone: false,
  foreground: "#4c1d95ff",
  background: "#ede9fe",
}).url;

// Fetch canonical SVG markup.
const svg = await qrCode("https://pictum.dev").svg();

<script type="module">
  import { definePictumElements } from "@pictum/web";

  definePictumElements();
</script>

<pictum-placeholder
  size="320"
  format="webp"
  density="2"
  background="#ffffff"
  color="#6d28d9"
  text="Coming soon"
  alt="Coming soon"
></pictum-placeholder>

import { placeholder } from "@pictum/web";

// Generate a custom-dimension URL without making a request.
const url = placeholder({
  width: 640,
  height: 360,
  format: "webp",
  density: 3,
  text: "Coming soon",
}).url;

// Fetch a square as canonical SVG markup.
const svg = await placeholder({
  size: 320,
  text: "Coming soon",
}).svg();