React

npm install @pictum/react

pnpm add @pictum/react

bun add @pictum/react

yarn add @pictum/react

import { Icon } from "@pictum/react";

export function Example() {
  return (
    <Icon
      name="devicon:react"
      aria-label="React"
      className="size-6"
    />
  );
}

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

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

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

import { Avatar } from "@pictum/react";

export function Example() {
  return (
    <Avatar
      seed="ada-lovelace"
      variant="gradient"
      format="webp"
      alt="Ada Lovelace"
      className="size-10"
    />
  );
}

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

// Generate the URL without making a request.
const url = avatar("ada-lovelace", {
  variant: "gradient",
  format: "webp",
}).url;

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

import { QrCode } from "@pictum/react";

export function Example() {
  return (
    <QrCode
      value="https://pictum.dev"
      format="svg"
      aria-label="Open Pictum"
      className="size-32"
    />
  );
}

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

// Generate the URL without making a request.
const url = qrCode("https://pictum.dev", {
  format: "png",
}).url;

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

import { Placeholder } from "@pictum/react";

export function Example() {
  return (
    <Placeholder
      size={320}
      format="webp"
      density={2}
      background="#ffffff"
      color="#6d28d9"
      text="Coming soon"
      alt="Coming soon"
    />
  );
}

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

// 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();