diff options
| author | mat <github@matdoes.dev> | 2022-02-21 21:27:59 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-21 21:27:59 -0600 |
| commit | 2071203061bfbb18f2c1991b45556b8ec47536a8 (patch) | |
| tree | ff654467ee6c1e2170e092b3af31711c1af8657d /src/lib/ListItemWithIcon.svelte | |
| parent | c680e2463046f4123f6ef3710e5cf9655cf3da57 (diff) | |
| download | skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.tar.gz skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.tar.bz2 skyblock-stats-2071203061bfbb18f2c1991b45556b8ec47536a8.zip | |
lazy-load collapsible when js is enabled
makes page load a tiny bit faster
Diffstat (limited to 'src/lib/ListItemWithIcon.svelte')
| -rw-r--r-- | src/lib/ListItemWithIcon.svelte | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/src/lib/ListItemWithIcon.svelte b/src/lib/ListItemWithIcon.svelte index 2c7aade..7666c18 100644 --- a/src/lib/ListItemWithIcon.svelte +++ b/src/lib/ListItemWithIcon.svelte @@ -1,8 +1,10 @@ <script lang="ts"> export let url: string + export let alt: string | undefined = undefined </script> -<li class="list-item-with-icon" style="background: url({url}) 0 0/1em no-repeat"> +<li class="list-item-with-icon"> + <img class="list-item-icon" src={url} {alt} loading="lazy" /> <slot /> </li> @@ -12,7 +14,12 @@ padding-left: 1.2em; position: relative; right: 1.2em; + } + .list-item-icon { image-rendering: crisp-edges; image-rendering: pixelated; + height: 1em; + position: absolute; + margin-left: -1.2em; } </style> |