Skip to main content

IconProps

interface IconProps extends ImgProps

Properties

alignContent

Inherited from ImgProps.alignContent

alignItems

Inherited from ImgProps.alignItems

alignSelf

Inherited from ImgProps.alignSelf

alpha

The alpha value of this image.

Unlike opacity, the alpha value affects only the image itself, leaving the fill, stroke, and children intact.

Inherited from ImgProps.alpha

antialiased

Inherited from ImgProps.antialiased

arrowSize

Controls the size of the end and start arrows.

To make the arrows visible make sure to enable startArrow and/or endArrow.

Inherited from ImgProps.arrowSize

basis

Inherited from ImgProps.basis

bottom

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.

Inherited from ImgProps.bottom

bottomLeft

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.

Inherited from ImgProps.bottomLeft

bottomRight

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.

Inherited from ImgProps.bottomRight

cache

Inherited from 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 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.

Inherited from ImgProps.cachePadding

cachePaddingBottom

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.

Inherited from ImgProps.cachePaddingBottom

cachePaddingLeft

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.

Inherited from ImgProps.cachePaddingLeft

cachePaddingRight

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.

Inherited from ImgProps.cachePaddingRight

cachePaddingTop

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.

Inherited from ImgProps.cachePaddingTop

children

Inherited from ImgProps.children

clip

clip?: SignalValueboolean
Inherited from ImgProps.clip

closed

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, #141414 Value can be either RGB or RGBA: #bada55, #bada55aa (latter is partially transparent) The shorthand version (e.g. #abc for #aabbcc is also possible.)

columnGap

Inherited from ImgProps.columnGap

composite

Inherited from ImgProps.composite

compositeOperation

compositeOperation?: SignalValueGlobalCompositeOperation
Inherited from ImgProps.compositeOperation

cornerSharpness

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.

Inherited from ImgProps.cornerSharpness

direction

Inherited from ImgProps.direction

end

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).

Inherited from ImgProps.end

endArrow

Whether to display an arrow at the end of the visible curve.

Use arrowSize to control the size of the arrow.

Inherited from ImgProps.endArrow

endOffset

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.

Inherited from ImgProps.endOffset

fill

Inherited from ImgProps.fill

filters

Inherited from ImgProps.filters

fontFamily

Inherited from ImgProps.fontFamily

fontSize

Inherited from ImgProps.fontSize

fontStyle

Inherited from ImgProps.fontStyle

fontWeight

Inherited from ImgProps.fontWeight

gap

Inherited from ImgProps.gap

grow

Inherited from ImgProps.grow

height

Inherited from ImgProps.height

icon

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
Inherited from ImgProps.key

layout

Inherited from ImgProps.layout

left

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.

Inherited from ImgProps.left

letterSpacing

Inherited from ImgProps.letterSpacing

lineCap

lineCap?: SignalValueCanvasLineCap
Inherited from ImgProps.lineCap

lineDash

Inherited from ImgProps.lineDash

lineDashOffset

Inherited from ImgProps.lineDashOffset

lineHeight

Inherited from ImgProps.lineHeight

lineJoin

lineJoin?: SignalValueCanvasLineJoin
Inherited from ImgProps.lineJoin

lineWidth

Inherited from ImgProps.lineWidth

margin

Inherited from ImgProps.margin

marginBottom

Inherited from ImgProps.marginBottom

marginLeft

Inherited from ImgProps.marginLeft

marginRight

Inherited from ImgProps.marginRight

marginTop

Inherited from ImgProps.marginTop

maxHeight

Inherited from ImgProps.maxHeight

maxWidth

Inherited from ImgProps.maxWidth

middle

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.

Inherited from ImgProps.middle

minHeight

Inherited from ImgProps.minHeight

minWidth

Inherited from ImgProps.minWidth

offset

Inherited from ImgProps.offset

offsetX

Inherited from ImgProps.offsetX

offsetY

Inherited from ImgProps.offsetY

opacity

Inherited from ImgProps.opacity

padding

Inherited from ImgProps.padding

paddingBottom

Inherited from ImgProps.paddingBottom

paddingLeft

Inherited from ImgProps.paddingLeft

paddingRight

Inherited from ImgProps.paddingRight

paddingTop

Inherited from ImgProps.paddingTop

position

Inherited from ImgProps.position

radius

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]
Inherited from ImgProps.radius

ratio

Inherited from ImgProps.ratio

ref

Inherited from ImgProps.ref

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.

Inherited from ImgProps.right

rotation

Inherited from ImgProps.rotation

rowGap

Inherited from ImgProps.rowGap

scale

Inherited from ImgProps.scale

scaleX

Inherited from ImgProps.scaleX

scaleY

Inherited from ImgProps.scaleY

shaders

shaders?: PossibleShaderConfig
Experimental
This is an experimental feature. The behavior and API may change drastically between minor releases.
Inherited from ImgProps.shaders

shadowBlur

Inherited from ImgProps.shadowBlur

shadowColor

Inherited from ImgProps.shadowColor

shadowOffset

Inherited from ImgProps.shadowOffset

shadowOffsetX

Inherited from ImgProps.shadowOffsetX

shadowOffsetY

Inherited from ImgProps.shadowOffsetY

shrink

Inherited from ImgProps.shrink

size

Inherited from ImgProps.size

skew

Inherited from ImgProps.skew

skewX

Inherited from ImgProps.skewX

skewY

Inherited from ImgProps.skewY

smoothCorners

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 from ImgProps.smoothCorners

smoothing

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 from ImgProps.smoothing

spawner

Deprecated

Use children instead.

Inherited from ImgProps.spawner

src

src?: SignalValuenullstring

The source of this image.

Inherited from ImgProps.src

start

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).

Inherited from ImgProps.start

startArrow

Whether to display an arrow at the start of the visible curve.

Use arrowSize to control the size of the arrow.

Inherited from ImgProps.startArrow

startOffset

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.

Inherited from ImgProps.startOffset

stroke

Inherited from ImgProps.stroke

strokeFirst

Inherited from ImgProps.strokeFirst

tagName

tagName?: keyof HTMLElementTagNameMap
Inherited from ImgProps.tagName

textAlign

textAlign?: SignalValueCanvasTextAlign
Inherited from ImgProps.textAlign

textDirection

textDirection?: SignalValueCanvasDirection
Inherited from ImgProps.textDirection

textWrap

Inherited from ImgProps.textWrap

top

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.

Inherited from ImgProps.top

topLeft

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.

Inherited from ImgProps.topLeft

topRight

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.

Inherited from ImgProps.topRight

width

Inherited from ImgProps.width

wrap

Inherited from ImgProps.wrap

x

x?: SignalValuenumber
Inherited from ImgProps.x

y

y?: SignalValuenumber
Inherited from ImgProps.y

zIndex

Inherited from ImgProps.zIndex