vite-plugin-svg-sprite
vite-plugin-svg-sprite copied to clipboard
meowtec
vite + react plugin dont work
Hello, plugin dont work with vite + react. There is no sprite in dist after prod build, there is no sprite after dev build. Could you help pls with example please?
@slemvs Of course you could not see any sprite file (the bundled *.svg) in dist, they are all compiled to .js files.
After the js executed in browser, it will inject a big <svg> to <body>, and that is the sprite.
BTW I think this plugin is unrelated to react / vue, or ant other frameworks.
If you can not see any icon in your page, you can provide your source code (as simple as possible) through .zip file or a new repo.
Hi, indeed the sprite is not working for now in react-vite, but it was working in my old project vite-pr.zip
Old project https://github.com/smoliymaryan89/link-sharing-app
@smoliymaryan89 I see you put all your icons into assets/sprite.svg, is is not encouraged. You should split it to multiple files: one file one icon.
// arrow.svg
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M5.333 14.667v2.667h16L14 24.667l1.893 1.893L26.453 16 15.893 5.44 14 7.333l7.333 7.333h-16z"/>
</svg>
// arrow-down
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path stroke-width="7.111" d="m3.556 3.556 21.333 21.333L46.222 3.556"/>
</svg>
This should be more maintainable.
If you prefer to manual maintenance all your icon in one file, I think you probably do not need this plugin: What you need is just embedding this file to html, you can use https://github.com/vbenjs/vite-plugin-html or some other way.
@meowtec thanks for the answer, in my understanding sprite is when you keep all the icons in one file and get them by id
@meowtec thanks for the answer, in my understanding sprite is when you keep all the icons in one file and get them by id
This is what vite-plugin-svg-sprite does for you
hi there! @meowtec got a question related to this issue, i'm using a Remix app, which has SSR embedded, i'm getting a ton of hydration errors and the icons are flashing, at a first start the icons are shown correctly, but then all turns white and they disappear. Did some lookup in all my svg files and did't find anything broken but a few unclosed tags, not a big deal.
hi there! @meowtec got a question related to this issue, i'm using a Remix app, which has SSR embedded, i'm getting a ton of hydration errors and the icons are flashing, at a first start the icons are shown correctly, but then all turns white and they disappear. Did some lookup in all my svg files and did't find anything broken but a few unclosed tags, not a big deal. Could you provide a minimal reproducible example?