Merge pull request #301 from scroll-tech/sibebar-improvement

Sibebar improvement

Author: dghelm

src/components/Icons/Icons.astro

@@ -0,0 +1,31 @@
+---
+import { Icons } from "./Icons"
+interface Props {
+  name: keyof typeof Icons
+  label?: string
+  color?: string
+  size?: string
+  class?: string
+}
+const { name, label, size = "1em", color } = Astro.props
+const a11yAttrs = label ? ({ "aria-label": label } as const) : ({ "aria-hidden": "true" } as const)
+---
+
+<svg
+  {...a11yAttrs}
+  class={Astro.props.class}
+  width="16"
+  height="16"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  set:html={Icons[name]}
+/>
+
+<style define:vars={{ "sl-icon-color": color, "sl-icon-size": size }}>
+  svg {
+    color: var(--sl-icon-color);
+    font-size: var(--sl-icon-size, 1em);
+    width: 1em;
+    height: 1em;
+  }
+</style>