From 54609f408a6accb18121eecc5416c86e999bef34 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 30 May 2021 21:05:16 +0200
Subject: [PATCH] Implement new way to way to display icons in IconButtons

* allows for multiple icons overlay
* allows to make individual icons smaller/bigger
---
 ts/components/IconButton.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 42a7527c9..eb1437701 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
+    export let iconSize: number = 80;
     export let active = false;
     export let disables = true;
     export let tabbable = false;
@@ -37,6 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
+    style={`--icon-size: ${iconSize}%`}
     title={tooltip}
     {...dropdownProps}
     disabled={_disabled}
@@ -44,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click
     on:mousedown|preventDefault
 >
-    <span class="p-1"><slot /></span>
+    <span> <slot /> </span>
 </button>
 
 <style lang="scss">
@@ -60,6 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     span {
         display: inline-block;
+        position: relative;
         vertical-align: middle;
 
         /* constrain icon */
@@ -68,10 +71,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         & > :global(svg),
         & > :global(img) {
+            position: absolute;
+            width: var(--icon-size);
+            height: var(--icon-size);
+            top: calc((100% - var(--icon-size)) / 2);
+            bottom: calc((100% - var(--icon-size)) / 2);
+            left: calc((100% - var(--icon-size)) / 2);
+            right: calc((100% - var(--icon-size)) / 2);
+
             fill: currentColor;
             vertical-align: unset;
-            width: 100%;
-            height: 100%;
         }
     }