Hotspot icons

Each hotspot type has a default overlay icon. Those icons appear on the page image and in the in-book help legend. Override them per textbook in src/book/hotspotIcons.ts.

That file lives under src/book/, so it survives tbx update. Leave it empty to keep the template defaults.

Defaults

How to override

Open src/book/hotspotIcons.ts and assign only the types you want to change. A value can be a Lucide icon component or a Vite image import (PNG, SVG, WebP, and so on).

Lucide icon

import { Sparkles } from "lucide-react";

export const hotspotIcons = {
  interactive: Sparkles,
};

Image file

Put custom images anywhere except src/book/_img/ — that folder is reserved for page images. A folder such as src/book/icons/ is a good home.

import customStatic from "./icons/static.png";

export const hotspotIcons = {
  static: customStatic,
};

Imported images replace the colored circular marker (on the page and in the help legend). They render at that marker’s size and are not tinted by hotspot type colors. Lucide icons keep the existing circle.

You can mix both in the same object. Omitted types keep the default:

import { Sparkles } from "lucide-react";
import customStatic from "./icons/static.png";

export const hotspotIcons = {
  static: customStatic,
  interactive: Sparkles,
  // multimedia omitted → PlayCircle
};

The page overlay and the help legend both read this map, so they stay in sync.

See Hotspots for area types and how hotspots are created.