From 2071203061bfbb18f2c1991b45556b8ec47536a8 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 21 Feb 2022 21:27:59 -0600
Subject: lazy-load collapsible when js is enabled

makes page load a tiny bit faster
---
 src/lib/ListItemWithIcon.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/lib/ListItemWithIcon.svelte')

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>
-- 
cgit