search

SpiriitLabs / vite-plugin-svg-spritemap

Vite plugin to generate svg spritemap
MIT License
53 stars 4 forks source link

Path to sprite incorrect in bundle #40

Closed portfolioris closed 10 months ago

portfolioris commented 10 months ago

The path to the sprite seems to be incorrectly replaced. Using SvelteKit, it renders the correct path server side:

/assets/spritemap.31984e98.svg#sprite-icon-arrow-right

In my JS bundle, I can see the path is:

assets/spritemap.31984e98.svg#sprite-icon-arrow-right

Svgs work on 1 level deep pages (mywebsite.com/contact), but on deeper pages (i.e. mywebsite/com/products/foo), the resolved path becomes

mywebsite.com/products/assets/spritemap.31984e98.svg

Which is incorrect.

Applelo commented 10 months ago

Hi, are you using the last version of the plugin and has /__spritemap#sprite-icon-arrow-right on your href ? There was mistakes on the doc (see #34) on versions prior 2.2.0. I have tried to create a Svelte and SvelteKit project and I have not encounter this problem. Can you provide a reproduction?

portfolioris commented 10 months ago

@Applelo Sure I can. Here is a reproduction site: https://65a2e6da85c506f5ae36d7cc--capable-smakager-bc7ebc.netlify.app/

This is a repo with the code: https://github.com/portfolioris/icon-test

Applelo commented 10 months ago

@portfolioris You're repo seems to be private. Can you make it public ?

portfolioris commented 10 months ago

@Applelo Oops, fixed now.

Applelo commented 10 months ago

So after investigation, SvelteKit ViteJS plugin set the config.base options to ./ instead of the default / (https://github.com/sveltejs/kit/blob/22ed677df8ece41fa2ecc4687a0594bff0664f46/packages/kit/src/exports/vite/index.js#L599) for performance purpose. It seems to not working with my transform (/__spritemap) and so, you have a difference between server and client hydratation : it will rewrite an incorrect url on svg href and also don't transform scss mixins. A fix will be push soon to remove the . on base path to remove this kind of issue.

Applelo commented 10 months ago

The fix is release, feel free to reopen the issue if you still facing the issue.

portfolioris commented 10 months ago

It works perfectly. Thanks a lot!