Illustration picks a named token SVG from @servicetitan/anvil2-illustrations using kebab-case scenario or header context, plus segment and trade. Prefer a named import from @servicetitan/anvil2-illustrations when you already know the artwork. Illustration pulls in every named illustration.
The catalog, filenames, and light/dark import paths live on Illustrations.
Installation
Illustration depends on @servicetitan/anvil2-illustrations. Theme follows AnvilProvider through illustration color tokens. There is no mode prop and no light/dark file swap.
Usage
Pass the facts on the component, or set defaults withIllustrationProvider. Props override the provider.
Resolution
Empty states default to theresidential segment when none is given via props or provider. They try an exact segment + trade file, then that segment’s evergreen file. Generic art is used only when segment was omitted and residential has no file. With an explicit segment and no evergreen file, Illustration renders nothing and warns in development.
Headers default to the residential segment when none is given via props or provider. context="project" also needs trade. context="service-agreements" always renders the commercial illustration. Customer and location headers use segment and ignore trade.
Missing art returns
null.
Accessibility
Illustration stays decorative unless you pass a non-empty alt. That sets role="img" and aria-label. Use empty alt or omit it when adjacent title and body already explain the state.
height forward to the rendered SVG. Empty-state examples use height={200}.
Illustration props
type defaults to "empty-state". scenario is required for empty states. context is required for headers. segment and trade override IllustrationProvider.