Render the contents of the <svg> tag using {@html} in the component mode

[aradalvand]

Importing an SVG file as a Svelte component with this plugin currently causes it to generate a Svelte component on the fly which will have the entire SVG directly as its content — it just adds {...$$props} on the <svg> tag:

sveltekit-svg/src/index.ts

Lines 72 to 81 in be9e121

	function addComponentProps(data: string): string {
	const parts = svgRegex.exec(data)
	if (!parts) {
	throw new Error('Invalid SVG')
	}
	const [, head, body] = parts
	return `${head} {...$$props}${body}`
	}

However, the problem with this is that when the Svelte compiler then looks at the generated component, it will parse all the elements inside the root <svg> tag, and will yield lots of compiler output with lots of function calls to create each element in the DOM. This is totally unnecessary. A better approach would be to render the contents of the <svg> tag using {@html}.

See this REPL, which demonstrates exactly this; take a look at AtHtmlSvg.svelte and RegularSvg.svelte and the JS output tab of each, and notice the difference.

Even some plugins have been created to address this, like svelte-preprocess-svg, for cases where you have inlined SVG elements in your Svelte components. But sveltekit-svg can make this improvement very easily.

Let me know if you're on board, and I will make a pull request.

[poppa]

Sorry for the delayed response. Vacation time and stuff so I've been out and about.

This sounds like an improvement to me, so I would gladly accept a PR 😍

[aradalvand]

Hi @poppa, thank you for the response, no worries!
I just created #40.

[poppa]

Thanks a bunch. I got another PR which is conflicting with this PR, but as soon as I have resolved both PR:s I will make a release.

I'm on vacation right now so it might take a few days.

[aradalvand]

@poppa Got ya, no problem, enjoy the vacation!

[poppa]

@aradalvand Thank you for your contribution. I have now released version 4.0.1 with your code changes 👍

[aradalvand]

@poppa Thanks!