import { IllustratedIconBrand } from '@uhg-abyss/web/ui/IllustratedIconBrand';// Disclaimer: Not all icon/color combinations are applicable; inapplicable combinations will display as empty
<IllustratedIconBrand icon="gears_system" color="multicolor" size={400} />Icon
Use the icon prop to select the illustration to display.
When using TypeScript, the icon property only accepts valid icon names. If an invalid icon name is provided, an error will be thrown. To verify that a given value is a valid icon name, use the isValidAssetName tool or use the ValidIllustratedIconBrandName type:
import { ValidIllustratedIconBrandName } from '@uhg-abyss/web/ui/IllustratedIconBrand';
let iconName: ValidIllustratedIconBrandName;Size
Use the size property to adjust the width of the illustrated icon. This can be either a number (i.e. a pixel value) or a string. The default value is "100%".
By default, the image will scale its size based on the width of its container. If you need it to remain a fixed width regardless of available space, you can add a style override as shown below. Try shrinking the screen and compare how the example above behaves compared to the one below.
Color
Use the color property to select available illustrated icon colors. The available colors are "gold", "orange", and "multicolor".
Not all illustrated icons have any color variants. In such cases, omit the color prop; otherwise, the icon will not display.
Alt text
Use the altText property to provide an accessible description of the illustrated icon. This text should be descriptive enough to convey the meaning of the icon. See the Accessibility tab for more information.
IllustratedIconBrand Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
altText | string | undefined | - | - | The alt text for the illustrated icon. |
color | 'gold' | 'orange' | 'multicolor' | undefined | - | - | The color of the illustrated icon. Applicable only to certain assets. |
icon | ValidIllustratedIconBrandName | - | The name of the illustration. | |
size | string | number | undefined | '100%' | - | The width of the illustration. |
IllustratedIconBrand Classes
| Class Name | Description |
|---|---|
| .abyss-illustrated-icon-brand-root | IllustratedIconBrand root element |
Screen Reader Support
Illustrated icons are intended to be used as decorative images and as such, are ignored by screen readers by default. However, should a case arise in which an illustrated icon needs to be accessible, use the altText prop to provide accessible alt text to the image. This text should be descriptive enough to convey the meaning of the illustrated icon.
Illustrated Icon Source
The source for these illustrated icons can be found in the brand libraries.
You can use the search functionality to find the required illustrated icons. Icons can be searched using their title or colors.