<SVG />

The SVG component is useful for rendering an SVG directly inside your widget.

Usage Example

Usage example
<SVG
  // Using the svg component you can embed an svg right into the widget
  src={buttonSvgSrc}
  onClick={() => setCount(count + 1) }
/>

const buttonSvgSrc = `
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="15.5" stroke="black" stroke-opacity="0.1"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 8H15V15H8V17H15V24H17V17H24V15H17V8Z" fill="black" fill-opacity="0.8"/>
  </svg>
`;

`SvgProps`

src: string

An svg string of the form "<svg .... />"

`SizeProps`

width?: Size

The width of the component.

height?: Size

The height of the component.

minWidth?: number

The minWidth of this component. Only affects AutoLayout and its children.

maxWidth?: number

The maxWidth of this component. Only affects AutoLayout and its children.

minHeight?: number

The minHeight of this component. Only affects AutoLayout and its children.

maxHeight?: number

The maxHeight of this component. Only affects AutoLayout and its children.

rotation?: number

The rotation of the node in degrees. Expects values from -180 to 180.

The rotation is with respect to the top-left of the object. Therefore, it is independent from the position of the object.

`GeometryProps`

fill?: HexCode | Color | Paint | (SolidPaint | GradientPaint)[]

The paints used to fill the area of the node

stroke?: HexCode | Color | SolidPaint | GradientPaint | (SolidPaint | GradientPaint)[]

The paints used to fill the area of the node's stroke.

strokeWidth?: number

The thickness of the stroke, in pixels. This value must be non-negative and can be fractional.

strokeAlign?: StrokeAlign

The alignment of the stroke with respect to the boundaries of the node.

Center-aligned stroke means the center of the stroke falls exactly on the geometry. Inside-aligned stroke shifts the stroke so it lies completely inside the shape, and outside-aligned stroke is vice versa.

info

Inside and outside stroke are actually implemented by doubling the stroke weight and masking the stroke by the fill. This means inside-aligned stroke will never draw strokes outside the fill and outside-aligned stroke will never draw strokes inside the fill.

strokeDashPattern?: number[]

The alternating stroke dash and gap lengths, in pixels. An empty array gives a solid stroke and a single value will be applied to both the dash and gap length.

`BaseProps`

name?: string

The name of the component. This is useful to specify a data-layer attribute to make things more debuggable when you inspect the sublayers of your widget.

hidden?: boolean

Toggles whether to show the component.

onClick?: (event: WidgetClickEvent) => Promise<any> | void

Attach a click handler on the given node. If the given function is async or returns a promise, the widget is only terminated when the async function has completed and the promise has been resolved. The click handler is also passed a WidgetClickEvent object that contains additional information about the click.

key?: string | number

The key of the component.

hoverStyle?: HoverStyle

The style to be applied when the mouse is hovering over the component.

The tooltip that is shown to the user when hovering over the component.

positioning?: 'auto' | 'absolute'

This value is ignored unless the node is a direct child of an AutoLayout frame.

value	description
'auto'	Layout this node according to auto-layout rules.
'absolute'	Take this node out of the auto-layout flow, while still nesting it inside the auto-layout frame. This allows explicitly setting `x`, `y`, `width`, and `height`.

`BlendProps`

blendMode?: BlendMode

The blendMode of the component.

opacity?: number

The opacity of the component.

effect?: Effect | Effect[]

The effect of the component.

`ConstraintProps`

x?: number | HorizontalConstraint

The x position of the node.

This value is ignored if the node is a child of an AutoLayout frame and has positioning set to 'auto'.

y?: number | VerticalConstraint

The y position of the node.