@procore/core-illustrations

@procore/core-illustrations

Illustration set for Procore Core components. SVG illustration components generated from the Procore Figma design file.

Illustrations are expressive visuals used for empty states, onboarding, and feature introductions. They are not icons — use them sparingly and intentionally. Current desktop usage: Empty states, zero-data screens, onboarding flows, and feature marketing surfaces.

Installation

yarn add @procore/core-illustrations

Usage

import { IllustrationExample } from '@procore/core-illustrations'

// Default size: 240px
<IllustrationExample />

// Size variants: 'sm' (160px) | 'md' (240px) | 'lg' (320px)
<IllustrationExample size="lg" />

Components render an img tag that load a svg file separately. This has reuse benefits in builds and runtime for better performance. The illustrations cannot be modifed with CSS or JS. Always maintain a 1:1 aspect ratio, never stretch or distort.

Empty state illustrations are considered decorative images and have adjacent visible text with the information. The images have an empty alt tag to intentionally be ignored by assistive technology.

Updating illustrations from Figma

Sourced from the foundation figma file.

• Copy .env.sample to .env and fill in FIGMA_TOKEN
• The script will fetch all illustrations from the Figma file to generate SVGs and React components. Run:

yarn update

Review the update (yarn storybook) and commit changes.