search

meowtec / vite-plugin-svg-sprite

SVG sprite plugin for [vite](https://github.com/vitejs/vite)
MIT License
52 stars 10 forks source link

vite + react plugin dont work #20

Open slemvs opened 10 months ago

slemvs commented 10 months ago

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?

meowtec commented 10 months ago

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

meowtec commented 10 months ago

BTW I think this plugin is unrelated to react / vue, or ant other frameworks.

meowtec commented 10 months ago

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.

mariansmolii commented 10 months ago

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

meowtec commented 10 months ago

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

mariansmolii commented 10 months ago

@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 commented 10 months ago

@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

lichomonjelat commented 6 months ago

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.

meowtec commented 6 months ago

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?