Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vite + react plugin dont work #20

Open
slemvs opened this issue Dec 20, 2023 · 9 comments
Open

vite + react plugin dont work #20

slemvs opened this issue Dec 20, 2023 · 9 comments

Comments

@slemvs
Copy link

slemvs commented Dec 20, 2023

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
Copy link
Owner

meowtec commented Dec 21, 2023

@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
Copy link
Owner

meowtec commented Dec 21, 2023

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

@meowtec
Copy link
Owner

meowtec commented Dec 21, 2023

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
Copy link

mariansmolii commented Dec 22, 2023 •
edited
Loading

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
Copy link
Owner

meowtec commented Dec 24, 2023 •
edited
Loading

@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
Copy link

mariansmolii commented Dec 24, 2023 •
edited
Loading

@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
Copy link
Owner

meowtec commented Dec 24, 2023

@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
Copy link

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
Copy link
Owner

meowtec commented Apr 30, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@meowtec @slemvs @lichomonjelat @mariansmolii