jgamboaandClaude
5d23809d48
Groundwork for redrawing the icons on their pixel grids. A name is now
<icon><px> (server14, server16, server24) and must match the size token
where it renders: 14 at --icon-size-sm, 16 at -md, 24 at -xl.
tdesignLoading is the one exception, since it spins. Every name not yet
redrawn aliases its TDesign glyph, so nothing changes on screen except
the manager-open overlay icon, which moves from lg to xl ("a status
mark on a card").
- pixel-icons.ts holds the redrawn glyphs, so far add14 (the + from
3f7145d, renamed from pixelAdd).
- TS code that picks icons takes Icon14 / Icon16 (menu items, file
glyphs, the copy arrow, toasts, transfer states), so build:ui
rejects a wrong name.
- icons.spec.ts checks every <ng-icon> in the skins: it has a size
token, and each literal name, both sides of a [name] ternary
included, is registered and drawn for that token's grid.
- TDesign's file1 is now fileText, since file1 plus a suffix would
read file114.
Co-Authored-By: Claude <noreply@anthropic.com>
17 lines
969 B
TypeScript
17 lines
969 B
TypeScript
// 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"/>'),
|
|
};
|