createSvgComponent() — astro Function Reference

Architecture documentation for the createSvgComponent() function in runtime.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 2

Entity Profile

CoreAstro→ RenderingEngine→ createSvgComponent() — astro Function Reference

Dependency Diagram

graph TD
  1a16c340_065e_0766_43ef_206ae0bd9586["createSvgComponent()"]
  7fdc3f21_0a35_05d8_60c6_78c31cc2f5e3["runtime.ts"]
  1a16c340_065e_0766_43ef_206ae0bd9586 -->|defined in| 7fdc3f21_0a35_05d8_60c6_78c31cc2f5e3
  87820b92_cb9d_cbde_2524_fd7221237e3b["normalizeProps()"]
  1a16c340_065e_0766_43ef_206ae0bd9586 -->|calls| 87820b92_cb9d_cbde_2524_fd7221237e3b
  a2a4862c_b7d3_8a2f_177c_992622ca12f3["makeNonEnumerable()"]
  1a16c340_065e_0766_43ef_206ae0bd9586 -->|calls| a2a4862c_b7d3_8a2f_177c_992622ca12f3
  style 1a16c340_065e_0766_43ef_206ae0bd9586 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/runtime.ts lines 15–39

export function createSvgComponent({ meta, attributes, children }: SvgComponentProps) {
	const Component = createComponent((_, props) => {
		const normalizedProps = normalizeProps(attributes, props);

		return render`<svg${spreadAttributes(normalizedProps)}>${unescapeHTML(children)}</svg>`;
	});

	if (import.meta.env.DEV) {
		// Prevent revealing that this is a component
		makeNonEnumerable(Component);

		// Maintaining the current `console.log` output for SVG imports
		Object.defineProperty(Component, Symbol.for('nodejs.util.inspect.custom'), {
			value: (_: any, opts: any, inspect: any) => inspect(meta, opts),
		});
	}

	Object.defineProperty(Component, 'toJSON', {
		value: () => meta,
		enumerable: false,
	});

	// Attaching the metadata to the component to maintain current functionality
	return Object.assign(Component, meta);
}