I have a Vite/React app that uses @tabler/icons for icons in the app, as well as letting the user choose icons for their own notes, so I need to be able to load them dynamically (instead of using the pre-made Tabler React components).
I'm including the entire SVG sprite in the application and referencing it like this:
export function Icon(props: {icon: string}) {
return (
<svg>
<use href={"assets/tabler-sprite-nostroke.svg#tabler-" + props.icon} />
</svg>
);
}
This works fine when the Vite app is running on its own, the browser only requests the SVG sprite once, and all of the icons load instantly. This works in both the Vite dev server, and when the standalone vite app is built for production and served.
But when I bring that same Vite app into Electron and build it for production, anytime icons need to be rendered it takes ~300ms to load each icon individually, and if I check the Network tab I can see it's requesting the tabler-sprite-nostroke.svg
file from the disk for every single icon being rendered.
What I've Tried
- Putting the
tabler-sprite-nostroke.svg
file in thepublic
folder in the vite app - Including the sprite file in the bundle using
vite-plugin-static-copy
- Importing the sprite from
node_modules
(https://vitejs.dev/guide/assets.html) (currently using, does the same as #1 and #2) - Disabling electron-builder putting the app into an asar archive
- Manually injecting cache options into the Response Headers using
onHeadersReceived
in the Electron main process - Including the sprite as an
<img>
in the body to hopefully make Electron cache it - Using
xlinkHref
instead ofhref
in the svg's<use>
element
None of these have had any effect so far