To import and use svg file in sveltekit I refer to this article https://riez.medium.com/svelte-kit-importing-svg-as-svelte-component-781903fef4ae By the way, when I finally input the code
<svelte:component this={Logo} />
I got the error like below
<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
I wish someone help me with this problem.
There is a SvelteKit plugin for inlining SVG:s. You can use the plugin in three different ways:
Looking through the article it seems to be solving a problem that doesn't exist in a way that is much more elaborate than needed.
In Svelte you can make a .svelte component that only contains SVG markup (inline), then use the svelte:component tag as you would with any other content.
Parent.svelte
<script>
import Circle from './Circle.svelte'
</script>
<svelte:component this={Circle} />
Circle.svelte
<svg viewbox="0 0 200 200">
<circle cx="100" cy="100" r="20"/>
</svg>
Here's a REPL showing how to switch between components that only have SVG in them.
You can even add stuff to the SVG components to make them dynamic since it's just markup like shown in this REPL.
In svelte-kit You can fix it by trying
<img src={YourSVGComponent} />
It worked for me.