Illustrations

The package ships the three illustrations used by the Error Page. They are plain SVG files from the design file.

error-404.svgAlso used for 401 and 403.

error-500.svgAlso used for 400.

error-503.svgAlso used for 408.

Using an illustration

Import the file by its package path. How a bundler turns an SVG import into a URL differs; with Vite, add ?url:

import art from '@beyul/sulmu-ui/illustrations/error-404.svg?url'

<ErrorPage illustration={<img alt="" src={art} />} title="..." />

errorPageCopy[code].illustration names the right file for each error code.

Note

401, 403 and 408 have no artwork of their own in the design file yet, so they reuse the 404 and 503 illustrations.