Illustration: React
Illustrations can be used to provide extra visual context for other items.
Installation
Before you can start using the @chameleon/react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Illustration } from '@chameleon/react';
export default function Example() {
return <Illustration name="image-placeholder" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
alt | String | - | No | Sets the native image alt attribute. |
name | ChameleonIllustration | 'image-placeholder' | No | The name of the illustration to render. |
extension | CdnExtension | 'svg' | No | The file extension of the illustration. |
className | String | - | No | Allows extending the class names of the component. |
name
The name property specifies which illustration to render. Available illustration names can be found in the Illustrations page.
extension
The extension property controls the file format of the loaded asset. Defaults to 'svg'. You can also use 'png'.
alt
The alt property sets the image alt text for accessibility. Since illustrations render as <img> elements, provide a meaningful alt description or an empty string for decorative images.