Icon component; header component nearly finished

frontend/src/lib/components/header.svelte

@@ -0,0 +1,58 @@
+<script>
+	import Searchbar from "./searchbar.svelte";
+    import Logo from "$lib/images/gif/maxwell-cat.gif";
+	import Icon from "./icon.svelte";
+
+    import MenuIcon from "$lib/images/icons/ui/menu.svg";
+    import LanguageIcon from "$lib/images/icons/ui/language.svg";
+    import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
+	import Spacer from "./service/spacer.svelte";
+    
+</script>
+
+<header class="header prevent-select" data-sveltekit-preload-data="hover">
+
+    <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
+
+    <img class="header__logo" alt="WeirdCat.su" src={Logo}>
+
+    <a class="header__link"  href="/">Home</a>
+    <a class="header__link" href="/blog">Blog</a>
+    <a class="header__link" href="/services">Services</a>
+
+    <Searchbar/>
+
+    <Spacer type="left"/>
+
+    <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
+    <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
+
+</header>
+
+<style>
+    .header {
+        display: flex;
+        align-items: center;
+
+        gap: 20px;
+        padding: 5px 20px 5px 20px;
+
+        background-color: var(--col_panel);
+        box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
+    }
+
+    .header__logo {
+        height: 64px;
+        width: 64px;
+
+    }
+
+    .header__link {
+        font-size: 28px;
+        text-decoration: none; 
+        color: var(--col_text_panel);
+
+    }
+
+
+</style>