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: https://github.com/poppa/sveltekit-svg/blob/be9e121e6df86c0f55177012f0c88603cd9ed9a7/src/index.ts#L72-L81

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!