Icons and palette

TerminalUi.icon() takes a name, center, size, and color. The TerminalIcon type limits the available names, so TypeScript catches a typo.

import { Graphics } from 'pixi.js';
import { CyberPreset, TerminalUi } from '@gamedevland/cyber-ui';
import type { TerminalIcon } from '@gamedevland/cyber-ui';

const palette = { ...CyberPreset.palette, accent: 0x68e0cb };
const g = app.stage.addChild(new Graphics());
const icon: TerminalIcon = 'gear';
TerminalUi.icon(g, icon, 32, 32, 24, palette.accent);
TerminalUi.icon(g, 'heart', 72, 32, 24, palette.danger);
TerminalUi.icon(g, 'lock', 112, 32, 24, palette.muted);

Icons consist of vector lines and shapes. They need no image atlas. Color is an RGB number, such as 0x68e0cb.

CyberPreset.palette is frozen. We make a copy, change the fields we need, and pass the same palette to surfaces and buttons. Names such as accent, danger, and text describe each color’s purpose, so changing the theme does not require rewriting elements.

The 27 names include chip, battle, agents, skills, gear, credit, play, check, repair, scan, and the left/right arrows. The full union is available in editor suggestions and the README.