sveltekit-svg icon indicating copy to clipboard operation
sveltekit-svg copied to clipboard

Is usage with a packaged library supported?

Open blindfish3 opened this issue 3 years ago • 2 comments

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!

blindfish3 avatar Jul 26 '22 09:07 blindfish3

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.

poppa avatar Aug 02 '22 06:08 poppa

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 ;)

blindfish3 avatar Aug 02 '22 12:08 blindfish3

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...

blindfish3 avatar Sep 16 '22 13:09 blindfish3

Cool, thanks a bunch!

I will take a look at it in the near future :)

poppa avatar Sep 19 '22 15:09 poppa

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.

poppa avatar Oct 02 '22 09:10 poppa