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
.
Colored Icon
By default, IconV2 components will inherit the color from the parent. You can also set the color explicitly using the className
prop.
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) 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' |
skipSize | false | false | boolean |
className | false | string |