> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro

> Use Pictum icon, avatar, QR code, and placeholder interfaces with Astro.

## Installation

Install the Astro package with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @pictum/astro
  ```

  ```bash pnpm theme={null}
  pnpm add @pictum/astro
  ```

  ```bash bun theme={null}
  bun add @pictum/astro
  ```

  ```bash yarn theme={null}
  yarn add @pictum/astro
  ```
</CodeGroup>

## Icons

Render an icon with `Icon`, or use `icon()` in the frontmatter script when you need its URL or SVG markup.

<CodeGroup>
  ```astro Component theme={null}
  ---
  import { Icon } from "@pictum/astro/components";
  ---

  <Icon
    name="devicon:astro"
    aria-label="Astro"
    class="size-6"
  />
  ```

  ```ts Helper theme={null}
  import { icon } from "@pictum/astro";

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

  // Fetch canonical SVG markup.
  const svg = await icon("devicon:astro").svg();
  ```
</CodeGroup>

## Avatars

Render a deterministic profile image with `Avatar`, or use `avatar()` to pass the selected image URL to another service or retrieve its canonical SVG.

<CodeGroup>
  ```astro Component theme={null}
  ---
  import { Avatar } from "@pictum/astro/components";
  ---

  <Avatar
    seed="ada-lovelace"
    variant="gradient"
    format="webp"
    alt="Ada Lovelace"
    class="size-10"
  />
  ```

  ```ts Helper theme={null}
  import { avatar } from "@pictum/astro";

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

## QR codes

Render scannable text or URLs with `QrCode`, or use `qrCode()` when frontmatter code needs the image URL or canonical SVG.

<CodeGroup>
  ```astro Component theme={null}
  ---
  import { QrCode } from "@pictum/astro/components";
  ---

  <QrCode
    value="https://pictum.dev"
    format="svg"
    aria-label="Open Pictum"
    class="size-32"
  />
  ```

  ```ts Helper theme={null}
  import { qrCode } from "@pictum/astro";

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

## Placeholders

Render square or custom-dimension images with `Placeholder`, or use `placeholder()` when frontmatter code needs the selected image URL or SVG markup.

<CodeGroup>
  ```astro Component theme={null}
  ---
  import { Placeholder } from "@pictum/astro/components";
  ---

  <Placeholder
    size={320}
    format="webp"
    density={2}
    background="#ffffff"
    color="#6d28d9"
    text="Coming soon"
    alt="Coming soon"
  />
  ```

  ```ts Helper theme={null}
  import { placeholder } from "@pictum/astro";

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

Helpers return the selected representation URL immediately. Calling `.svg()` retrieves canonical SVG markup for the same asset.