logojusteringer

src/components/Logo.vue

+<template>
+    <div>
+        <img src="../components/icons/logo.png" alt="logo" :style="{ width: logoSize }">
+    </div>
+</template>
+<script>
+export default {
+    name: "Logo"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Navbar.vue

@@ -14,7 +14,10 @@
                  </li>
                 <li>
                     <RouterLink :to="'/'" :aria-label="'link to week menu page'">
-                      <Icon icon="mdi:leaf-circle" :color="iconColor"  :style="{ fontSize: logoSize }" />
+                        <div id = "logoContainer" :style="{ width: logoSize, height: logoSize }" >
+                            <img src="../components/icons/logo.png" alt="logo">
+                        </div>
+                     <!--<Icon icon="mdi:leaf-circle" :color="iconColor"  :style="{ fontSize: logoSize }" />-->
                     </RouterLink>
                 </li>
                 <li>
@@ -33,10 +36,11 @@
 </template>
 <script>
 import { Icon } from '@iconify/vue';
+import Logo from "@/components/Logo.vue";
 
 export default {
     name: "Navbar",
-  components: {Icon},
+  components: {Logo, Icon},
   computed: {
     iconColor() {
       return '#ffffff';
@@ -45,7 +49,7 @@ export default {
       return `32px`;
     },
     logoSize() {
-      return '32px';
+      return '62px';
     }
   }
 }
@@ -53,6 +57,15 @@ export default {
 
 <style scoped lang="scss">
 
+#logoContainer {
+    background-color: white;
+    border-radius: 50%;
+
+}
+#logoContainer img{
+    width:70%;
+}
+
 nav {
     position: fixed;
     top: auto;
@@ -67,11 +80,10 @@ ul {
     display: flex;
     list-style-type: none;
     justify-content: space-between;
+    align-items: center;
     padding: 0;
     margin-right: 1em;
     margin-left: 1em;
-    margin-top: .6em;
-
 }
 
 
@@ -84,7 +96,6 @@ ul {
     }
 }
 
-
 li{
     text-align: center;
 }