Svg
Generic wrapper for SVG vectors. Receives an array of paths and exposes
uniform controls for sizing (size/dimensions) and theming (fill,
fillAll).
When to use
| ✅ Use when… | 🚫 Avoid when… |
|---|---|
|
Minimal structure
<Svg
viewBox="0 0 366.31 165.66"
paths={[{ d: 'M323.41 163.16 ...', fill: '#your_custom_color' }, { d: 'M323.41 91.75 ...' }]}
/>viewBox: preserves the aspect ratio regardless of the rendered size.paths: array withd(path) and optionalfill.fill: default color of the inner<g>; falls back totheme.foundation.text.primaryif not provided.
When size/dimensions resolve to a number, width/height are also
emitted as native HTML attributes on the <svg> (in addition to the CSS) —
this reserves space and prevents CLS/unstyled "explosion" before author CSS
loads. CSS-only values (the 1em default, auto, calc(...), a fluid
100%) stay CSS-only, with no attribute emitted.
Using size
size forces a square (1:1) rendering and takes precedence over
dimensions.
<Svg {...logoProps} size={300} />Using dimensions.ratio
The height is computed from the width via ratio.
<Svg {...logoProps} dimensions={{ width: 300, ratio: 16 / 9 }} />Explicit width and height
<Svg {...logoProps} dimensions={{ width: '300px', height: '80px' }} />Properties
Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | — |
dimensions | { width: string | number; height?: string | number; ratio?: number; } | undefined | — | Fine-grained sizing. Use when you need an aspect ratio other than 1:1 or
explicit heights. Ignored if `size` is set.
@example ```tsx
// 16:9 ratio derived from the width
<Svg dimensions={{ width: 300, ratio: 16 / 9 }} />
// explicit dimensions
<Svg dimensions={{ width: '300px', height: '80px' }} />
``` |
disabled | boolean | — | Marks the SVG as disabled (semantic only — styling is applied by the callsite). |
error | string | Record<string, unknown> | — | When provided, forces the error color (the palette's `danger`) across the
whole SVG. Useful for inputs in an invalid state. |
fillAll | string | — | When set, ignores each path's individual `fill` and forces inheritance of
the parent `<g>` color — used for monochrome SVGs. |
paths | any | — | Array of paths to render. Each item has `d` (path data) and an optional `fill`. |
size | string | number | — | Uniform size. When provided, renders a square (1:1 ratio) and
`dimensions` is ignored. |
title | string | — | Accessible text used in the inner `<title>`. |
Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.