Some icons look better using stroke over fill

src/components/header/NavigationIcon.vue

@@ -4,7 +4,10 @@
     :key="route?.title"
     :to="{ path: route?.route }"
   >
-    <li class="navigation-link" :class="{ active: route.route == active }">
+    <li
+      class="navigation-link"
+      :class="{ active: matchesActiveRoute(), 'nofill-stroke': useStroke }"
+    >
       <component :is="route.icon" class="navigation-icon"></component>
       <span>{{ route.title }}</span>
     </li>
@@ -19,12 +22,18 @@
   interface Props {
     route: INavigationIcon;
     active?: string;
+    useStroke?: boolean;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   const store = useStore();
   const loggedIn = computed(() => store.getters["user/loggedIn"]);
+
+  function matchesActiveRoute() {
+    const currentRoute = props.route.title.toLowerCase();
+    return props?.active?.includes(currentRoute);
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -62,6 +71,18 @@
       margin-top: 0.25rem;
       color: var(--text-color-70);
     }
+
+    &.nofill-stroke {
+      .navigation-icon {
+        stroke: var(--text-color-70);
+        fill: none !important;
+      }
+
+      &:hover .navigation-icon,
+      &.active .navigation-icon {
+        stroke: var(--text-color);
+      }
+    }
   }
 
   a {

src/components/header/NavigationIcons.vue

@@ -5,6 +5,7 @@
       :key="_route.route"
       :route="_route"
       :active="activeRoute"
+      :useStroke="_route?.useStroke"
     />
     <slot></slot>
   </ul>
@@ -50,6 +51,7 @@
       title: "Activity",
       route: "/activity",
       requiresAuth: true,
+      useStroke: true,
       icon: IconActivity
     },
     {
@@ -60,8 +62,9 @@
     },
     {
       title: "Settings",
-      route: "/profile?settings=true",
+      route: "/settings",
       requiresAuth: true,
+      useStroke: true,
       icon: IconSettings
     }
   ];

src/icons/IconActivity.vue

@@ -13,9 +13,3 @@
     <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
   </svg>
 </template>
-
-<style lang="scss" scoped>
-  svg {
-    fill: none !important;
-  }
-</style>

src/interfaces/INavigationIcon.ts

@@ -3,4 +3,5 @@ export default interface INavigationIcon {
   route: string;
   icon: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   requiresAuth?: boolean;
+  useStroke?: boolean;
 }