makeSvgComponent() — astro Function Reference

Architecture documentation for the makeSvgComponent() function in svg.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1

Entity Profile

CoreAstro→ RenderingEngine→ makeSvgComponent() — astro Function Reference

Dependency Diagram

graph TD
  c986786a_12cf_f805_aa49_25878b232b2f["makeSvgComponent()"]
  d53c456b_ca45_596d_c3fb_0f448cc565ec["svg.ts"]
  c986786a_12cf_f805_aa49_25878b232b2f -->|defined in| d53c456b_ca45_596d_c3fb_0f448cc565ec
  30531c69_d9d9_32a9_8455_19b8a0d409d3["parseSvg()"]
  c986786a_12cf_f805_aa49_25878b232b2f -->|calls| 30531c69_d9d9_32a9_8455_19b8a0d409d3
  style c986786a_12cf_f805_aa49_25878b232b2f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/assets/utils/svg.ts lines 47–66

export function makeSvgComponent(
	meta: ImageMetadata,
	contents: Buffer | string,
	svgoConfig: AstroConfig['experimental']['svgo'],
): string {
	const file = typeof contents === 'string' ? contents : contents.toString('utf-8');
	const { attributes, body: children } = parseSvg({
		path: meta.fsPath,
		contents: file,
		svgoConfig,
	});
	const props: SvgComponentProps = {
		meta,
		attributes: dropAttributes(attributes),
		children,
	};

	return `import { createSvgComponent } from 'astro/assets/runtime';
export default createSvgComponent(${JSON.stringify(props)})`;
}