"Icon only loads if used" is probably not true

[szulcus]

Describe the bug I'm afraid that the statement "Icon only loads if used" in the documentation is unfortunately not true. During the yarn generate command, all the icons from the ~/assets/icons folder appeared in the .output/public/_nuxt. For example, the test-icon icon, which I don't use anywhere in the project:

I think it has to do with Vite's lousy import handling (import.meta.glob). I have no idea how or if it is possible to fix this, but I also encountered this problem when I wanted to dynamically fetch images from ~/assets/images with:

import.meta.glob('/assets/images/**/**.svg', { as: 'url', eager: false });

To Reproduce

1. Add unnecessary icons to ~/assets/icons folder
2. Run yarn/npm generate command and see .output/public/_nuxt

Expected behavior It would be great to fix it. I've been looking for a way to dynamically download images from Vite for several months now and it's slowly driving me crazy. I'm thinking more and more seriously about migrating to webpack.

[gitFoxCode]

"Icon only loads if used" refers to the user downloading icons when the page is loaded (check yourself the 'network' tab), in the previous version all icons were downloaded to one file and the user downloaded everything, now it downloads only what is used. As for 'generate', everything in /assets is reworked by the engine, reworking icons that are literally only used in the project would probably require a much more advanced module and I don't know if there's any point in introducing something like that. In my opinion, it does not pay to return to webpack, Vite is more future-proof. You can check yourself the performance of your application using webpack and vite and compare which is better. In webpack I could use a simple require() and everything worked as expected, here you have to work a little harder and still it doesn't work 100% as you can dream of but despite some limits, other benefits make it worthwhile anyway

[szulcus]

@gitFoxCode ok, i didn't see the earlier version. I think it's worth it after all, I have a lot of icons, only a few percent of which are used. If you have any way to get around this, would you like to let me know? The only solution seems to be to manually create an array with paths to these images/icons 🤔

[gitFoxCode]

@szulcus Hmm, I don't know if it's a game worth the candle, the imports are created on build and are not immediately downloaded by the user (unless it's a regular app.vue onepage, then it's built differently). A project that has thousands of icons in /icons user will display in a few ms

[nossienl]

this is not true ! if you have a project that has a couple of thousand icons, it will cause your page to prefetch all thousands of icons , and this will result in a perfomance issue, because the whole page if blocked during prefetching the icons so a few MW is more like a few ( 10 seconds ), remove the statement or make a way to actual load the icons only when needed @szulcus did you find another way ? im currently having the same issue but this package is causing performance issues

[szulcus]

@nossienl unfortunately this is "magic of Vite" 😕. Yes, I have switched to a nuxt-icon module, and I store icons in .vue files instead of .svg: https://nuxt.com/modules/icon#vue-component But you must remember to manually set the fill and stroke attributes to currentColor if you want to change icons colors.