// Icons drawn on the pixel grid they render at. A TDesign glyph is a 24-unit
// SVG with 2-unit strokes on whole units, so at 14 or 16px every straight line
// lands between pixels and smears over two at half ink on a 1x screen. Each
// glyph here is drawn on its own grid (viewBox 0 0 N N for an N px icon, one
// unit = one CSS pixel at 100% scale) with 1px strokes on half pixels, so
// straight lines fill whole pixels at 1x and 2x. The name's suffix is that
// grid and must match the size token where it renders: 14 = --icon-size-sm,
// 16 = -md, 24 = -xl (icons.spec.ts checks). Drawing rules: docs/gotchas.md.

/** One glyph on an n-px grid: 1px square-capped strokes in the text colour. */
const svg = (n: number, body: string) =>
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n} ${n}" fill="none" stroke="currentColor" stroke-linecap="square">${body}</svg>`;

export const PIXEL_ICONS = {
  add14: svg(14, '<path d="M7.5 3.5v8M3.5 7.5h8"/>'),
};