Icon
beta
The IconV2 component allows you to render various icons with customizable properties such as size, color theme, and name. It will soon replace the old Icon component.
Size Variants
IconV2 supports multiple predefined size variants: 2xs, xs, sm, md, lg and xl. The default size is sm.
Color Variants
IconV2 supports predefined color variants through the color prop: inherit, danger, warning, success, info, and disabled. The default color is inherit.
Custom Colors
You can also set custom colors using the className prop to override the default styling.
Usage
import { IconV2 } from '@harnessio/ui/components'
//...
return <IconV2 name="check" size="lg" />API Reference
The IconV2 component can be sized using the size prop, which applies predefined size classes.
<IconV2 name="double-tick" // name of the icon size="md" // [OPTIONAL] size variant (2xs, xs, sm, md, lg, xl) color="inherit" // [OPTIONAL] color variant (inherit, danger, warning, success, info, disabled) className="my-class" // [OPTIONAL] custom class name skipSize={false} // [OPTIONAL] skip size classes if custom styling is applied/>Prop | Required | Default | Type |
|---|---|---|---|
| name | true | string | |
| size | false | 'sm' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' |
| color | false | 'inherit' | 'inherit' | 'danger' | 'warning' | 'success' | 'info' | 'disabled' |
| skipSize | false | false | boolean |
| className | false | string |