IconProps
interface
IconProps
extends
ImgProps
Properties
alignContent
Inherited from
ImgProps.alignContent
alignItems
Inherited from
ImgProps.alignItems
alignSelf
Inherited from
ImgProps.alignSelf
alpha
alpha
?:
SignalValue
number
The alpha value of this image.
Unlike opacity, the alpha value affects only the image itself, leaving thefill, stroke, and children intact.
Inherited from
ImgProps.alpha
antialiased
antialiased
?:
SignalValue
boolean
ImgProps.antialiased
arrowSize
arrowSize
?:
SignalValue
number
Controls the size of the end and start arrows.
To make the arrows visible make sure to enable
startArrow
and/or
endArrow
.
ImgProps.arrowSize
basis
Inherited from
ImgProps.basis
bottom
bottom
?:
SignalValue
PossibleVector2
number
The position of the bottom edge of this node.
This shortcut property will set the node's position so that the bottom edgeends up in the given place.If present, overrides the
position
property.
ImgProps.bottom
bottomLeft
bottomLeft
?:
SignalValue
PossibleVector2
number
The position of the bottom left corner of this node.
This shortcut property will set the node's position so that the bottom leftcorner ends up in the given place.If present, overrides the
position
property.
ImgProps.bottomLeft
bottomRight
bottomRight
?:
SignalValue
PossibleVector2
number
The position of the bottom right corner of this node.
This shortcut property will set the node's position so that the bottomright corner ends up in the given place.If present, overrides the
position
property.
ImgProps.bottomRight
cache
cache
?:
SignalValue
boolean
ImgProps.cache
cachePadding
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
ImgProps.cachePadding
cachePaddingBottom
cachePaddingBottom
?:
SignalValue
number
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
ImgProps.cachePaddingBottom
cachePaddingLeft
cachePaddingLeft
?:
SignalValue
number
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
ImgProps.cachePaddingLeft
cachePaddingRight
cachePaddingRight
?:
SignalValue
number
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
ImgProps.cachePaddingRight
cachePaddingTop
cachePaddingTop
?:
SignalValue
number
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
ImgProps.cachePaddingTop
children
Inherited from
ImgProps.children
clip
clip
?:
SignalValue
boolean
ImgProps.clip
closed
closed
?:
SignalValue
boolean
Whether the curve should be closed.
Closed curves have their start and end points connected.
Inherited from
ImgProps.closed
color
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.columnGap
composite
composite
?:
SignalValue
boolean
ImgProps.composite
compositeOperation
compositeOperation
?:
SignalValue
GlobalCompositeOperation
ImgProps.compositeOperation
cornerSharpness
cornerSharpness
?:
SignalValue
number
Controls the sharpness of
smoothCorners
.
This property only affects the way rounded corners are drawn. To controlthe 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.cornerSharpness
direction
Inherited from
ImgProps.direction
end
end
?:
SignalValue
number
A percentage from the start after which the curve should be clipped.
The portion of the curve that comes after the given percentage will bemade 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.end
endArrow
endArrow
?:
SignalValue
boolean
Whether to display an arrow at the end of the visible curve.
Use
arrowSize
to control the size of the arrow.
ImgProps.endArrow
endOffset
endOffset
?:
SignalValue
number
The offset in pixels from the end of the curve.
This property lets you specify where along the defined curve the actualvisible portion ends. For example, setting it to
20
will make the last20 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.endOffset
fill
Inherited from
ImgProps.fill
filters
filters
?:
SignalValue
Filter
[]
ImgProps.filters
fontFamily
fontFamily
?:
SignalValue
string
ImgProps.fontFamily
fontSize
fontSize
?:
SignalValue
number
ImgProps.fontSize
fontStyle
fontStyle
?:
SignalValue
string
ImgProps.fontStyle
fontWeight
fontWeight
?:
SignalValue
number
ImgProps.fontWeight
gap
gap
?:
SignalValue
Length
ImgProps.gap
grow
grow
?:
SignalValue
number
ImgProps.grow
height
Inherited from
ImgProps.height
icon
icon
:
SignalValue
string
The identifier of the icon.
You can find identifiers on Icônes .They can look like this:
-
mdi:language-typescript -
ph:anchor-simple-bold -
ph:activity-bold
justifyContent
Inherited from
ImgProps.justifyContent
key
key
?:
string
ImgProps.key
layout
layout
?:
LayoutMode
ImgProps.layout
left
left
?:
SignalValue
PossibleVector2
number
The position of the left edge of this node.
This shortcut property will set the node's position so that the left edgeends up in the given place.If present, overrides the
position
property.
ImgProps.left
letterSpacing
letterSpacing
?:
SignalValue
number
ImgProps.letterSpacing
lineCap
lineCap
?:
SignalValue
CanvasLineCap
ImgProps.lineCap
lineDash
lineDash
?:
SignalValue
number
[]
ImgProps.lineDash
lineDashOffset
lineDashOffset
?:
SignalValue
number
ImgProps.lineDashOffset
lineHeight
Inherited from
ImgProps.lineHeight
lineJoin
lineJoin
?:
SignalValue
CanvasLineJoin
ImgProps.lineJoin
lineWidth
lineWidth
?:
SignalValue
number
ImgProps.lineWidth
margin
Inherited from
ImgProps.margin
marginBottom
marginBottom
?:
SignalValue
number
ImgProps.marginBottom
marginLeft
marginLeft
?:
SignalValue
number
ImgProps.marginLeft
marginRight
marginRight
?:
SignalValue
number
ImgProps.marginRight
marginTop
marginTop
?:
SignalValue
number
ImgProps.marginTop
maxHeight
Inherited from
ImgProps.maxHeight
maxWidth
Inherited from
ImgProps.maxWidth
middle
middle
?:
SignalValue
PossibleVector2
number
The position of the center of this node.
This shortcut property will set the node's position so that the center endsup in the given place.If present, overrides the
position
property.When
offset
is not set, this will be the same as the
position
.
ImgProps.middle
minHeight
Inherited from
ImgProps.minHeight
minWidth
Inherited from
ImgProps.minWidth
offset
offset
?:
SignalValue
PossibleVector2
number
ImgProps.offset
offsetX
offsetX
?:
SignalValue
number
ImgProps.offsetX
offsetY
offsetY
?:
SignalValue
number
ImgProps.offsetY
opacity
opacity
?:
SignalValue
number
ImgProps.opacity
padding
Inherited from
ImgProps.padding
paddingBottom
paddingBottom
?:
SignalValue
number
ImgProps.paddingBottom
paddingLeft
paddingLeft
?:
SignalValue
number
ImgProps.paddingLeft
paddingRight
paddingRight
?:
SignalValue
number
ImgProps.paddingRight
paddingTop
paddingTop
?:
SignalValue
number
ImgProps.paddingTop
position
position
?:
SignalValue
PossibleVector2
number
ImgProps.position
radius
Rounds the corners of this rectangle.
The value represents the radius of the quarter circle that is used to roundthe corners. If the value is a number, the same radius is used for allcorners. Passing an array of two to four numbers will set individual radiifor each corner. Individual radii correspond to different corners dependingon 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.radius
ratio
ratio
?:
SignalValue
number
ImgProps.ratio
ref
ref
?:
ReferenceReceiver
any
ImgProps.ref
right
right
?:
SignalValue
PossibleVector2
number
The position of the right edge of this node.
This shortcut property will set the node's position so that the right edgeends up in the given place.If present, overrides the
position
property.
ImgProps.right
rotation
rotation
?:
SignalValue
number
ImgProps.rotation
rowGap
Inherited from
ImgProps.rowGap
scale
scale
?:
SignalValue
PossibleVector2
number
ImgProps.scale
scaleX
scaleX
?:
SignalValue
number
ImgProps.scaleX
scaleY
scaleY
?:
SignalValue
number
ImgProps.scaleY
shaders
shaders
?:
PossibleShaderConfig
ImgProps.shaders
shadowBlur
shadowBlur
?:
SignalValue
number
ImgProps.shadowBlur
shadowColor
Inherited from
ImgProps.shadowColor
shadowOffset
shadowOffset
?:
SignalValue
PossibleVector2
number
ImgProps.shadowOffset
shadowOffsetX
shadowOffsetX
?:
SignalValue
number
ImgProps.shadowOffsetX
shadowOffsetY
shadowOffsetY
?:
SignalValue
number
ImgProps.shadowOffsetY
shrink
shrink
?:
SignalValue
number
ImgProps.shrink
size
Inherited from
ImgProps.size
skew
skew
?:
SignalValue
PossibleVector2
number
ImgProps.skew
skewX
skewX
?:
SignalValue
number
ImgProps.skewX
skewY
skewY
?:
SignalValue
number
ImgProps.skewY
smoothCorners
smoothCorners
?:
SignalValue
boolean
Enables corner smoothing.
This property only affects the way rounded corners are drawn. To controlthe corner radius use the
radius
property.
When enabled, rounded corners are drawn continuously using Bézier curvesrather than quarter circles. The sharpness of the curve can be controlledwith
cornerSharpness
.
You can read more about corner smoothing in this article by Nick Lawrence .
Inherited from
ImgProps.smoothCorners
smoothing
smoothing
?:
SignalValue
boolean
Whether the image should be smoothed.
When disabled, the image will be scaled using the nearest neighborinterpolation with no smoothing. The resulting image will appear pixelated.
Inherited from
ImgProps.smoothing
spawner
Deprecated
Use
children
instead.
ImgProps.spawner
src
src
?:
SignalValue
null
string
The source of this image.
Inherited from
ImgProps.src
start
start
?:
SignalValue
number
A percentage from the start before which the curve should be clipped.
The portion of the curve that comes before the given percentage will bemade 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.start
startArrow
startArrow
?:
SignalValue
boolean
Whether to display an arrow at the start of the visible curve.
Use
arrowSize
to control the size of the arrow.
ImgProps.startArrow
startOffset
startOffset
?:
SignalValue
number
The offset in pixels from the start of the curve.
This property lets you specify where along the defined curve the actualvisible portion starts. For example, setting it to
20
will make the first20 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.startOffset
stroke
Inherited from
ImgProps.stroke
strokeFirst
strokeFirst
?:
SignalValue
boolean
ImgProps.strokeFirst
tagName
tagName
?:
keyof
HTMLElementTagNameMap
ImgProps.tagName
textAlign
textAlign
?:
SignalValue
CanvasTextAlign
ImgProps.textAlign
textDirection
textDirection
?:
SignalValue
CanvasDirection
ImgProps.textDirection
textWrap
Inherited from
ImgProps.textWrap
top
top
?:
SignalValue
PossibleVector2
number
The position of the top edge of this node.
This shortcut property will set the node's position so that the top edgeends up in the given place.If present, overrides the
position
property.
ImgProps.top
topLeft
topLeft
?:
SignalValue
PossibleVector2
number
The position of the top left corner of this node.
This shortcut property will set the node's position so that the top leftcorner ends up in the given place.If present, overrides the
position
property.
ImgProps.topLeft
topRight
topRight
?:
SignalValue
PossibleVector2
number
The position of the top right corner of this node.
This shortcut property will set the node's position so that the top rightcorner ends up in the given place.If present, overrides the
position
property.
ImgProps.topRight
width
Inherited from
ImgProps.width
wrap
Inherited from
ImgProps.wrap
x
x
?:
SignalValue
number
ImgProps.x
y
y
?:
SignalValue
number
ImgProps.y
zIndex
zIndex
?:
SignalValue
number
ImgProps.zIndex