# packages/core/src/lib/components/svg-path.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/lib/components/svg-path.ts#L47). [Back to reference](/reference/components/svg-path/)

1 import { definePrimitive } from '../define-primitive.js';
2 import { createSvgPath } from '../geometry/svg-path.js';
3 import { RenderingContext2D } from '../types.js';
4 import type { PibblPhysics2DPropExtension } from '../types.js';
5 import { stripLayoutParticipation } from '../style/resolve-built-in.js';
6 import { registerOpaqueStyleProperties } from '../style/resolve-dispatch.js';
7 import type { ResolvedSvgPathStyle, SvgPathStyle } from '../style/types.js';
8 import { renderPath } from './path.js';
9 import type { PathProps } from './path.js';
10 
11 /**
12  * Authored inputs for SvgPath, including the declared data and presentation options.
13  *
14  * @see {@link PathProps}
15  * @see {@link PibblPhysics2DPropExtension}
16  * @see {@link SvgPath}
17  */
18 export interface SvgPathProps extends PathProps, PibblPhysics2DPropExtension {}
19 
20 function renderSvgPath(
21   props: SvgPathProps,
22   style: Readonly<ResolvedSvgPathStyle>,
23   ctx: RenderingContext2D,
24 ) {
25   const { d, ...pathStyle } = style;
26   const svgPath = createSvgPath({ d });
27   return renderPath(
28     props,
29     {
30       ...pathStyle,
31       d: svgPath,
32     },
33     ctx,
34   );
35 }
36 
37 /**
38  * Describes an SVG-data path primitive for JSX or createElement authoring.
39  *
40  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
41  * props and style types.
42  * @throws When called directly; Pibbl mounts this component through JSX or createElement.
43  *
44  * @see {@link SvgPathProps}
45  * @see {@link SvgPathStyle}
46  */
47 export const SvgPath = definePrimitive<
48   SvgPathProps,
49   SvgPathStyle,
50   SvgPathStyle,
51   ResolvedSvgPathStyle
52 >(renderSvgPath, {
53   resolveStyle: style =>
54     stripLayoutParticipation(style) as ResolvedSvgPathStyle,
55 });
56 registerOpaqueStyleProperties(SvgPath, ['d', 'fill', 'stroke', 'cursor']);
57

## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.