sveltekit-svg
sveltekit-svg copied to clipboard
Is usage with a packaged library supported?
I'm trying to use svelte-svg in components of a library output with svelte-kit package. Locally (and with Storybook) i can get everything working fine; but when I try to import my packaged components into an external project I hit the following error:
<MyIcon> is not a valid SSR component
My svg source path is inside the library src/
I was hoping I could configure svelte-svg in the external project and use the path to the icons in node_modules in the includePaths; but unfortunately that doesn't work. I did manage to get [unplugin-icons|https://github.com/antfu/unplugin-icons] working with this approach (that uses some form of alias in the SVG path); but I can't get that working with Storybook; and TBH svelte-svg seems somewhat simpler to work with.
Is it possible to use svelte-svg in a packaged library; and if so is there any documentation/example available? Thanks!
Sorry for the late response, but it's been vacation time :)
I really haven't tried using sveltekit-svg in a packaged library, so I can't answer your question.
If you create a repo I can fork with an as simple as possible project reflecting your problem I will be more than happy to take a look at it.
Thanks for the reply. I'm about to go on holiday myself :grin: I'll look into setting up a repo when I get back in a couple of weeks. The problem in a package context is that the path to the SVG is relative to node_modules/libraryName; so you'd have to adjust the path to the SVG in the library code to take that into account. I think unplugin-icons works because the SVG path is always relative to the alias. I'll update this once I have set up the repo ;)
That was a long holiday... I wish! :rofl: Inevitably post holiday busy-ness ensued :sweat_smile:
I've now set up a repo that reproduces the issue I described. Hopefully the steps in the readme work and demonstrate the problem. TBH I'm not sure how easy it is to fix...
Cool, thanks a bunch!
I will take a look at it in the near future :)
From what I can tell the plugins in vite.config.js are never even run when running svelte-package. After glancing over the source code of @sveltejs/package I can't see that plugins in any shape or form is supported.
If creating a library which bundles SVGs I suppose the way to go is to statically convert the SVGs to Svelte components via something like svg-to-svelte.
So I think this issue isn't within the scope of this plugin to solve.