Svg
An SVG from a URL. Without color it shows the file's own colours; with color its shape is filled with that colour (for one-colour icons and logos).
A logo from a file
Svg shows an SVG file at the size you give it. Without color it keeps the file's own colours.
Row(
.config(gap: 12, yAlign: mid)
Svg(.config(size: 40, alt: 'LAYR', src: '/icon.svg'))
Text(.config(size: 20, weight: semibold) .obj('LAYR'))
)In the theme's colour
With color, the SVG's shape is filled with that colour, so a one-colour icon or logo follows the theme. Here the same file becomes a flat rounded square in the accent colour: the shape is the file's outline, the colour is yours.
Row(
.config(gap: 16, yAlign: mid)
Svg(.config(size: 40, alt: 'LAYR', color: accent, src: '/icon.svg'))
Svg(.config(size: 40, alt: 'LAYR', color: teal, src: '/icon.svg'))
Svg(.config(size: 40, alt: 'LAYR', color: ink, src: '/icon.svg'))
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
src | src | SVG URL. | |
alt | txt | Text alternative. | |
color | color | Fills the SVG's shape with this colour. | |
w (width) | len | fill | hug | Width: a length, fill (share the remaining space) or hug (fit content, default). | |
h (height) | len | fill | hug | Height: a length, fill or hug (default). | |
size (s) | size | Width and height together: size: 200 or size: (200, 120). | |
minW (minWidth) | len | Minimum width. | |
maxW (maxWidth) | len | Maximum width. | |
minH (minHeight) | len | Minimum height. | |
maxH (maxHeight) | len | Maximum height. | |
aspect (aspectRatio) | num | Aspect ratio (width / height), e.g. 16/9. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |