Browser freezing really bad

[demetrius-mp]

tags to help users find this issue: unresponsive, freeze, stutter

this is more of a warning and guidance on how to (probably) solve this problem. because of this issue, if you import an icon using named exports

import { SearchIcon, AcademicCapIcon, ... } from '@rgossiaux/svelte-heroicons/outline';

all the icons exported from @rgossiaux/svelte-heroicons/outline/index will be loaded into the browser. that means that if you import a single icon from /outline, and another single icon from /solid, your browser will load every icon from both of these paths.

i just had this problem and realized that this is what was causing the browser to freeze.

Solution

import the icon directly from the svelte component, using the full path

import { SearchIcon } from '@rgossiaux/svelte-heroicons/solid';

becomes

import SearchIcon from '@rgossiaux/svelte-heroicons/solid/Search';

this will definetly look bad if you import a lot of icons, but until svelte team solves this issue, this is the only way to stop the freezings

[sureshjoshi]

@demetrius-mp It seems the linked issue is solved? Does that mean that there can be a proper fix for this ticket somehow?

Aside, another workaround which appears to work: import * as hicon from "@rgossiaux/svelte-heroicons/outline"; (not solving the issue

I had to do that because heroicons and headless ui were killing my integration testing time. Doing the above reduced imports (and test time) by about 6x

However, that has it's own set of weird problems - so I'd probably just enumerate one by one with a deep url, to avoid some stress :)