Icon: React
Icons can be used to provide extra visual context for other items.
Installation
Before you can start using the @mediahuis/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 { Brand } from '@mediahuis/chameleon-theme-wl/icons';
import { Icon } from '@mediahuis/chameleon-react';
export default function Example() {
return <Icon as={Brand} />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
as | SVGType | - | No | Allows rendering the icon with a different SVG component. |
className | String | - | No | Allows extending the class names of the Icon component. |
color | ChameleonCssToken | - | No | Allows changing the color of the component through the use of a CSS Custom Property. (e.g. 'var(--color-primary-base)') |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | No | Changes the icon's height and width. |
as
The as property allows you to specify the icon component to be used. It can be an icon from the @mediahuis/chameleon-theme-wl/icons package or a custom icon component. For example, you can use <Brand /> as a custom icon component where you can add additional properties to the icon.
Possible icons can be found in the Icons documentation.