Icon component; header component nearly finished

2024-08-05 09:57:34 +03:00
parent f021b80892
commit f08d4b1a70
9 changed files with 153 additions and 6 deletions
--- a/frontend/src/lib/components/icon.svelte
+++ b/frontend/src/lib/components/icon.svelte
@@ -0,0 +1,22 @@
+<script>
+    export let image = "";
+    export let onclick = () => {};
+    export let color = "var(--col_text_panel)";
+    export let size = "25px";
+</script>
+
+<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>
+
+<style>
+    .icon {
+        cursor: pointer;
+        background-color: var(--color);
+        object-fit: contain;
+        -webkit-mask-image: var(--image);
+        mask-image: var(--image);
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        height: var(--size);
+        width: var(--size);
+    }
+</style>