Icon set contact sheet

The design systems team runs this after adding icons. The icon package already exports the names. The sheet has to show every icon with a label, in a grid that grows when the array grows. Adding twelve icons should not mean rebuilding a grid by hand.

This happens after the add, not once when the first sheet is drawn. The person doing it already has the names in the package. They should not paste glyphs into a design file and hope the labels still match the exports.

The job is one contact-sheet PNG, sized to fit the grid. You write { icons: ["arrow", "check", ...] } from the icon package’s exports. The component maps over that array. You export. The next add is a longer array and the same command.

Give Lerret a React component under .lerret/ and a data file. export writes a PNG. Same sheet, longer array, new image.

The component is .lerret/design-system/icon-sheet.jsx. It is a grid mapping over an icon-name array with labels. The sheet does not hard-code twelve cells. It reads the array. The labels are the names.

Data is { icons: ["arrow", "check", ...] }. One array, regenerated from the icon package’s exports and written to a data file. The sheet is a derived artifact of that list. When the package grows, the file grows, and the sheet grows. There is no second grid to maintain.

The image is a PNG contact sheet, sized to fit the grid. The grid maps over the array, so twelve new names are twelve new cells with labels. You regenerate the array from the package exports, write the data file, and run export again.

Adding twelve icons means the array grows and the sheet regenerates. No manual grid maintenance. A design-file sheet will leave a hole or overlap the first time someone pastes the new glyphs. You use Lerret because the sheet is the array, and the array is the package.

The array is regenerated from the icon package’s exports and written to a data file. Adding twelve icons means the array grows and the sheet regenerates. There is no batch product, no queue, no orchestrator. The sheet is a still from a local file. No manual grid maintenance.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.