Illustration

The Illustration component displays various illustrations and graphics used throughout the Harness UI. It has built-in support for theme-specific variants.

Usage

<Illustration name="no-data-folder" size={112} />

Sizing

The Illustration component can be sized using the size prop which sets both width and height (default is 112px).

Theme Support

Some illustrations have theme-specific variants. Use the themeDependent prop to enable theme-sensitive rendering.

Illustrations with specific light theme variants will use them automatically when the theme is set to light. For illustrations without a light variant, enabling themeDependent will apply an invert filter in light mode.

API Reference

<Illustration
  name="illustration-name"  // name of the illustration
  size={112}               // [OPTIONAL] size in pixels for both width and height
  themeDependent={false}   // [OPTIONAL] whether to use theme-specific variants
  className="my-class"     // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
name	true		IllustrationsNameType
size	false	112	number
width	false		number
height	false		number
themeDependent	false	false	boolean
className	false		string