import { IconCustom } from '@uhg-abyss/mobile';() => { return <IconCustom icon="rx" />;};Size
Use the size property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: $xs: 16 $sm: 20 $md: 24 $lg: 40 $xl: 48
Variants
Use the variant prop to change the style of the custom icons. The prop takes in a light and dark value, as well as
lightactive and darkactive counterparts. The default is light.
Brand
Use the brand property to adjust which brands icons are being selected. Note that some of the icons are unique to certain brands.
The default is the theme brand, then falls back to uhc.
Active
When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.
Indicator
The indicator component can be used as a wrapper to add a notification badge.
IconCustom Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
brand | 'uhc' | 'optum' | undefined | - | - | Specifies the brand of the custom icon. Defaults to the theme's brand, then falls back to 'uhc'. |
icon | keyof typeof dark | keyof typeof light | - | Name of the custom icon | |
variant | 'light' | 'dark' | 'darkactive' | 'lightactive' | 'light' | 'lightactive' | undefined | 'light' | - | The style variation of the custom icon |
IconCustom Classes
| Class Name | Description |
|---|---|
| abyss-icon-custom-root | Icon custom root element |
IconCustom Tokens
| Token Name | Value | |
|---|---|---|
| icon.color.default | #196ECF | |
| icon.sizing.xs | 16 | |
| icon.sizing.sm | 20 | |
| icon.sizing.md | 24 | |
| icon.sizing.lg | 40 | |
| icon.sizing.xl | 48 |