Usage
Shape renders a single-path vector graphic inside a root svg. Paint flows through design tokens, ChartColor, or DataColor; there is no className, style, or as. Use it for map pins, cluster badges, and other marks you author as path data rather than as a fixed glyph or raster asset.
Icon has no glyph.strokeAlignment inside or outside a closed path.DataColor on fill or stroke.| Need | Use instead |
|---|---|
| Standard UI glyph from the design system | Icon |
| Trusted logo or illustration as an SVGR component | Image inline svg mode |
| Fixed 12×12 legend dot, line, or hatch | Swatch (when documented) |
| Raster or URL imagery | Image src mode |
| Arbitrary styling escape hatches | Not supported on Shape |
toSvgPathData from @prepared911/ui/shape (the helper throws with a clear message when the microsyntax is invalid). Rules enforced at authoring time:
M or m.MmLlHhVvCcSsQqTtAaZz and numeric arguments.SvgPathData at call sites.SvgPathData in module scope next to your asset constants, as map fixtures do, so invalid paths fail at load time rather than in the tree.
SvgViewBox object with positive width and height (import the type from @prepared911/ui/shape):
Shape renders it as "minX minY width height" on the root svg. The view box defines user units for the path; it is independent of the on-screen box (see size below).
Optional size sets inline-size and block-size from the space scale (--space-*), mirroring inline SVG sizing on Image. Each axis is a SpaceOption step (0, 4, 8, … 128). Omit an axis to keep the intrinsic aspect ratio from viewBox.
strokeWidth is a ShapeStrokeWidth enum value in viewBox user units, not screen pixels: Hairline = 1, Thin = 2, Regular = 3, Thick = 4. Alignment math runs in user space; the component does not use vector-effect.
The root svg is overflow: visible, so an Outside stroke or a Center stroke on a path that touches the viewBox edge is not cut off. strokeAlignment defaults to Center. Inside and Outside are meaningful only for closed paths; open paths should use Center.
| Alignment | What is drawn |
|---|---|
Center | One path with fill and stroke centered on the path centerline at strokeWidth. |
Inside | Fill on the path; then a clip path matching the shape (clipPathUnits="userSpaceOnUse") and a stroke at 2× strokeWidth clipped to the interior. |
Outside | Fill on the path; then a mask (maskUnits="userSpaceOnUse") with a padded white rect and a black shape cutout, and a stroke at 2× strokeWidth visible only outside the fill. |
useId and stay internal.
fill and stroke accept VectorPaint:
Foreground values used for Text and Icon paint, except Foreground.Inherit.ChartColor: palette CSS variables for series you control.DataColor: pass-through colors from third-party data; see Data color. Prefer tokens or ChartColor for anything Axon 911 owns; use DataColor only when the payload cannot be mapped (for example ESRI layer styles).fill or stroke paints none for that side.
Same union as Image inline SVG:
label (LocalizedMessage) → role="img" and aria-label on the root svg.decorative: true → aria-hidden="true" and focusable="false".