JavaScript

@pictum/core provides framework-independent helpers for JavaScript and TypeScript applications. Generate asset URLs synchronously or retrieve canonical SVG markup on demand without a component runtime. The helpers are SSR-friendly and work in browsers or server runtimes with the standard URL, TextEncoder, and fetch APIs.

Installation

Install the core package with your preferred package manager.

npm install @pictum/core

pnpm add @pictum/core

bun add @pictum/core

yarn add @pictum/core

Icons

Identify an icon by collection and name. Reading .url makes no network request; call .svg() when you need canonical SVG markup.

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

const asset = icon("devicon:typescript");

const url = asset.url;
const svg = await asset.svg();

Avatars

Choose a stable seed, avatar variant, and image format.

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

const asset = avatar("ada-lovelace", {
  variant: "gradient",
  format: "webp",
});

const url = asset.url;
const svg = await asset.svg();

The selected format controls .url. Calling .svg() retrieves the canonical SVG for the same seed and variant.

QR codes

Pass the text or URL to encode and select an output format.

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

const asset = qrCode("https://pictum.dev", {
  format: "png",
});

const url = asset.url;
const svg = await asset.svg();

Placeholders

Create square or custom-dimension placeholders with optional text, colors, and retina density.

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

const asset = placeholder({
  width: 640,
  height: 360,
  format: "webp",
  density: 2,
  background: "#ffffff",
  color: "#6d28d9",
  text: "Coming soon",
});

const url = asset.url;
const svg = await asset.svg();

Use another Pictum deployment

Pass an absolute baseUrl to any helper when you use a custom or staging deployment.

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

const asset = icon("lucide:sparkles", {
  baseUrl: "https://assets.example.com/v1",
});

Getting started

Assets

Integrations

Installation

Icons

Avatars

QR codes

Placeholders

Use another Pictum deployment

​Installation

​Icons

​Avatars

​QR codes

​Placeholders

​Use another Pictum deployment

Installation

Icons

Avatars

QR codes

Placeholders

Use another Pictum deployment