moire

Moiré

Moiré is the design system and React UI toolkit used by Spectre.

How to develop

Run these commands:

pnpm i
pnpm dev

Add an icon

• Open the Phosphor icons Figma file.
• Make sure you are either on the “Light”, “Fill” or “Bold” page, depending on the icon you want (“Light” should be used when possible).
• Export the icon as SVG, and drop the resulting file into pkg/moire/icons (not pkg/moire/src/icons).
• If the icon comes from the “Fill” page, add Filled to the file name, e.g. Arrow.svg => ArrowFilled.svg.
• If the icon comes from the “Bold” page, add Bold to the file name, e.g. Arrow.svg => ArrowBold.svg.
• Please keep the original name otherwise.
• Run pnpm build:icons to generate the components in pkg/moire/src/icons.
• Done!