PixelArt#

Draws a grid of colored cells from rows of single-character keys mapped through a palette — a logo or sprite as terminal pixels.

Import#

TSX 
import { PixelArt } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, PixelArt } from '@sigx/terminal';

const rows = [
    '.rrr.',
    'rrrrr',
    '.ggg.',
    '..b..',
];

const palette = { r: '#e0606a', g: '#5fd17f', b: '#6ea8ff' };

const App = component(() => {
    return () => (
        <box border="single" label="Logo">
            <PixelArt rows={rows} palette={palette} />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
rowsstring[]required — rows of palette keys; . / space is transparent
paletteRecord<string, string>required — key → color (token or hex)

renderPixelArt(rows, palette) is the headless renderer that returns the ANSI lines.

See also#

  • Banner — block-font headings.