1

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.

enter image description here

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.

Network tab of Electron instance

What I've Tried

  1. Putting the tabler-sprite-nostroke.svg file in the public folder in the vite app
  2. Including the sprite file in the bundle using vite-plugin-static-copy
  3. Importing the sprite from node_modules (https://vitejs.dev/guide/assets.html) (currently using, does the same as #1 and #2)
  4. Disabling electron-builder putting the app into an asar archive
  5. Manually injecting cache options into the Response Headers using onHeadersReceived in the Electron main process
  6. Including the sprite as an <img> in the body to hopefully make Electron cache it
  7. Using xlinkHref instead of href in the svg's <use> element

None of these have had any effect so far

jcv8000
  • 41
  • 1
  • 2

0 Answers0