IconProps
interface IconProps extends ImgProps
Properties
alignContent
Inherited from ImgProps.alignContentalignItems
Inherited from ImgProps.alignItemsalignSelf
Inherited from ImgProps.alignSelfalpha
alpha?: SignalValuenumber
The alpha value of this image.
Unlike opacity, the alpha value affects only the image itself, leaving the fill, stroke, and children intact.
Inherited fromImgProps.alphaantialiased
antialiased?: SignalValueboolean
ImgProps.antialiasedarrowSize
arrowSize?: SignalValuenumber
Controls the size of the end and start arrows.
To make the arrows visible make sure to enable startArrow and/or
endArrow.
ImgProps.arrowSizebasis
Inherited from ImgProps.basisbottom
bottom?: SignalValuePossibleVector2number
The position of the bottom edge of this node.
This shortcut property will set the node's position so that the bottom edge
ends up in the given place.
If present, overrides the position property.
ImgProps.bottombottomLeft
bottomLeft?: SignalValuePossibleVector2number
The position of the bottom left corner of this node.
This shortcut property will set the node's position so that the bottom left
corner ends up in the given place.
If present, overrides the position property.
ImgProps.bottomLeftbottomRight
The position of the bottom right corner of this node.
This shortcut property will set the node's position so that the bottom
right corner ends up in the given place.
If present, overrides the position property.
ImgProps.bottomRightcache
cache?: SignalValueboolean
ImgProps.cachecachePadding
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
ImgProps.cachePaddingcachePaddingBottom
cachePaddingBottom?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
ImgProps.cachePaddingBottomcachePaddingLeft
cachePaddingLeft?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
ImgProps.cachePaddingLeftcachePaddingRight
cachePaddingRight?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
ImgProps.cachePaddingRightcachePaddingTop
cachePaddingTop?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
ImgProps.cachePaddingTopchildren
Inherited from ImgProps.childrenclip
clip?: SignalValueboolean
ImgProps.clipclosed
closed?: SignalValueboolean
Whether the curve should be closed.
Closed curves have their start and end points connected.
Inherited fromImgProps.closedcolor
The color of the icon
Provide the color in one of the following formats:
- named color like
red,darkgray, … - hexadecimal string with # like
#bada55,#141414Value can be either RGB or RGBA:#bada55,#bada55aa(latter is partially transparent) The shorthand version (e.g.#abcfor#aabbccis also possible.)
columnGap
Inherited from ImgProps.columnGapcomposite
composite?: SignalValueboolean
ImgProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
ImgProps.compositeOperationcornerSharpness
cornerSharpness?: SignalValuenumber
Controls the sharpness of smoothCorners.
This property only affects the way rounded corners are drawn. To control
the corner radius use the radius property.
Requires smoothCorners to be enabled to have any effect.
By default, corner sharpness is set to 0.6 which represents a smooth,
circle-like rounding. At 0 the edges are squared off.
ImgProps.cornerSharpnessdirection
Inherited from ImgProps.directionend
end?: SignalValuenumber
A percentage from the start after which the curve should be clipped.
The portion of the curve that comes after the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
ImgProps.endendArrow
endArrow?: SignalValueboolean
Whether to display an arrow at the end of the visible curve.
Use arrowSize to control the size of the arrow.
ImgProps.endArrowendOffset
endOffset?: SignalValuenumber
The offset in pixels from the end of the curve.
This property lets you specify where along the defined curve the actual
visible portion ends. For example, setting it to 20 will make the last
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.
If you want to animate the curve appearing on the screen, use end
instead.
ImgProps.endOffsetfill
Inherited from ImgProps.fillfilters
Inherited from ImgProps.filtersfontFamily
fontFamily?: SignalValuestring
ImgProps.fontFamilyfontSize
fontSize?: SignalValuenumber
ImgProps.fontSizefontStyle
fontStyle?: SignalValuestring
ImgProps.fontStylefontWeight
fontWeight?: SignalValuenumber
ImgProps.fontWeightgap
Inherited from ImgProps.gapgrow
grow?: SignalValuenumber
ImgProps.growheight
Inherited from ImgProps.heighticon
icon: SignalValuestring
The identifier of the icon.
You can find identifiers on Icônes. They can look like this:
mdi:language-typescriptph:anchor-simple-boldph:activity-bold
justifyContent
Inherited from ImgProps.justifyContentkey
key?: string
ImgProps.keylayout
Inherited from ImgProps.layoutleft
left?: SignalValuePossibleVector2number
The position of the left edge of this node.
This shortcut property will set the node's position so that the left edge
ends up in the given place.
If present, overrides the position property.
ImgProps.leftletterSpacing
letterSpacing?: SignalValuenumber
ImgProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
ImgProps.lineCaplineDash
lineDash?: SignalValuenumber[]
ImgProps.lineDashlineDashOffset
lineDashOffset?: SignalValuenumber
ImgProps.lineDashOffsetlineHeight
Inherited from ImgProps.lineHeightlineJoin
lineJoin?: SignalValueCanvasLineJoin
ImgProps.lineJoinlineWidth
lineWidth?: SignalValuenumber
ImgProps.lineWidthmargin
Inherited from ImgProps.marginmarginBottom
marginBottom?: SignalValuenumber
ImgProps.marginBottommarginLeft
marginLeft?: SignalValuenumber
ImgProps.marginLeftmarginRight
marginRight?: SignalValuenumber
ImgProps.marginRightmarginTop
marginTop?: SignalValuenumber
ImgProps.marginTopmaxHeight
Inherited from ImgProps.maxHeightmaxWidth
Inherited from ImgProps.maxWidthmiddle
middle?: SignalValuePossibleVector2number
The position of the center of this node.
This shortcut property will set the node's position so that the center ends
up in the given place.
If present, overrides the position property.
When offset is not set, this will be the same as the
position.
ImgProps.middleminHeight
Inherited from ImgProps.minHeightminWidth
Inherited from ImgProps.minWidthoffset
offset?: SignalValuePossibleVector2number
ImgProps.offsetoffsetX
offsetX?: SignalValuenumber
ImgProps.offsetXoffsetY
offsetY?: SignalValuenumber
ImgProps.offsetYopacity
opacity?: SignalValuenumber
ImgProps.opacitypadding
Inherited from ImgProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
ImgProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
ImgProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
ImgProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
ImgProps.paddingTopposition
position?: SignalValuePossibleVector2number
ImgProps.positionradius
Rounds the corners of this rectangle.
The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:
// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]
ImgProps.radiusratio
ratio?: SignalValuenumber
ImgProps.ratioref
ref?: ReferenceReceiverany
ImgProps.refright
right?: SignalValuePossibleVector2number
The position of the right edge of this node.
This shortcut property will set the node's position so that the right edge
ends up in the given place.
If present, overrides the position property.
ImgProps.rightrotation
rotation?: SignalValuenumber
ImgProps.rotationrowGap
Inherited from ImgProps.rowGapscale
scale?: SignalValuePossibleVector2number
ImgProps.scalescaleX
scaleX?: SignalValuenumber
ImgProps.scaleXscaleY
scaleY?: SignalValuenumber
ImgProps.scaleYshaders
shaders?: PossibleShaderConfig
ImgProps.shadersshadowBlur
shadowBlur?: SignalValuenumber
ImgProps.shadowBlurshadowColor
Inherited from ImgProps.shadowColorshadowOffset
Inherited from ImgProps.shadowOffsetshadowOffsetX
shadowOffsetX?: SignalValuenumber
ImgProps.shadowOffsetXshadowOffsetY
shadowOffsetY?: SignalValuenumber
ImgProps.shadowOffsetYshrink
shrink?: SignalValuenumber
ImgProps.shrinksize
Inherited from ImgProps.sizeskew
skew?: SignalValuePossibleVector2number
ImgProps.skewskewX
skewX?: SignalValuenumber
ImgProps.skewXskewY
skewY?: SignalValuenumber
ImgProps.skewYsmoothCorners
smoothCorners?: SignalValueboolean
Enables corner smoothing.
This property only affects the way rounded corners are drawn. To control
the corner radius use the radius property.
When enabled, rounded corners are drawn continuously using Bézier curves
rather than quarter circles. The sharpness of the curve can be controlled
with cornerSharpness.
You can read more about corner smoothing in this article by Nick Lawrence.
Inherited fromImgProps.smoothCornerssmoothing
smoothing?: SignalValueboolean
Whether the image should be smoothed.
When disabled, the image will be scaled using the nearest neighbor interpolation with no smoothing. The resulting image will appear pixelated.
Inherited fromImgProps.smoothingspawner
Deprecated
Use children instead.
ImgProps.spawnersrc
src?: SignalValuenullstring
The source of this asset.
Inherited fromImgProps.srcstart
start?: SignalValuenumber
A percentage from the start before which the curve should be clipped.
The portion of the curve that comes before the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
ImgProps.startstartArrow
startArrow?: SignalValueboolean
Whether to display an arrow at the start of the visible curve.
Use arrowSize to control the size of the arrow.
ImgProps.startArrowstartOffset
startOffset?: SignalValuenumber
The offset in pixels from the start of the curve.
This property lets you specify where along the defined curve the actual
visible portion starts. For example, setting it to 20 will make the first
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.
If you want to animate the curve appearing on the screen, use start
instead.
ImgProps.startOffsetstroke
Inherited from ImgProps.strokestrokeFirst
strokeFirst?: SignalValueboolean
ImgProps.strokeFirsttagName
tagName?: keyof HTMLElementTagNameMap
ImgProps.tagNametextAlign
textAlign?: SignalValueCanvasTextAlign
ImgProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
ImgProps.textDirectiontextWrap
Inherited from ImgProps.textWraptop
top?: SignalValuePossibleVector2number
The position of the top edge of this node.
This shortcut property will set the node's position so that the top edge
ends up in the given place.
If present, overrides the position property.
ImgProps.toptopLeft
topLeft?: SignalValuePossibleVector2number
The position of the top left corner of this node.
This shortcut property will set the node's position so that the top left
corner ends up in the given place.
If present, overrides the position property.
ImgProps.topLefttopRight
topRight?: SignalValuePossibleVector2number
The position of the top right corner of this node.
This shortcut property will set the node's position so that the top right
corner ends up in the given place.
If present, overrides the position property.
ImgProps.topRightwidth
Inherited from ImgProps.widthwrap
Inherited from ImgProps.wrapx
x?: SignalValuenumber
ImgProps.xy
y?: SignalValuenumber
ImgProps.yzIndex
zIndex?: SignalValuenumber
ImgProps.zIndex