Icon Component
Icon component is used to display icons, emojis, svgs, etc.
Properties
Visible
Prop | isVisible |
---|---|
Type | boolean |
Default | true |
Whether or not this node is visible.
Enabled
Prop | isEnabled |
---|---|
Type | boolean |
Default | true |
Whether or not this node is enabled.
Tooltip
Prop | tooltip |
---|---|
Type | string |
Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
Prop | top |
---|---|
Type | number |
Default | 1 |
The position of the node from the top side of the grid (grid-row-start
).
Left
Prop | left |
---|---|
Type | number |
Default | 1 |
The position of the node from the left side of the grid (grid-column-start
).
Width
Prop | width |
---|---|
Type | string |
Default | 78px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4
will become grid-column-end: span 4
). When this node is in a stack layout, the width can be specified using CSS units (e.g. 100px
or 100%
), or be left unitless to be treated as flex-grow for the node.
Min Width
Prop | minWidth |
---|---|
Type | string |
Default | undefined |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
Prop | maxWidth |
---|---|
Type | string |
Default | undefined |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
Prop | height |
---|---|
Type | string |
Default | 32px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4
will become grid-row-end: span 4
). When this node is in a stack layout, the height can be specified using CSS units (e.g. 100px
or 100%
), or be left unitless to be treated as flex-grow for the node.
Min Height
Prop | minHeight |
---|---|
Type | string |
Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
Prop | maxHeight |
---|---|
Type | string |
Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
Prop | overflow |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.
Overflow X
Prop | overflowX |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal axis for content that is larger than its container.
Overflow Y
Prop | overflowY |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the vertical axis for content that is larger than its container.
Custom Styles
Prop | styles |
---|---|
Type | string |
Default | ::component { } |
Custom CSS styles to be applied to the node. Use element.styles
to refer to the current node.
Object Fit
Prop | objectFit |
---|---|
Type | ObjectFit ('none' | 'contain' | 'cover' | 'fill' | 'scale-down') |
Default | cover |
The strategy used to set how the content of a replaced element should be resized to fit its container.
Mode
Prop | mode |
---|---|
Type | IconMode ('default' | 'svg') |
Default | default |
The mode of the icon.
Icon
Prop | value |
---|---|
Type | string |
Default | PersonIcon |
The value of the icon. The string expression can be a native emoji or an icon name.
Icon Color
Prop | color |
---|---|
Type | string |
Default | text.muted |
The color of the icon.
Source
Prop | source |
---|---|
Type | string |
Default | <svg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'> <circle cx='25' cy='25' r='20' fill='currentColor' /> </svg> |
The source of the SVG.
Alternative Text
Prop | alt |
---|---|
Type | string |
Default | A generic representation of a person in profile. |
The alternative text to use instead of media resource on assistive devices.
Event Handlers
On Click
Handler | iconNode.onClick |
---|
Called when the user clicks the node. Use this event to trigger downstream actions when this node is clicked.