header search icon styles fixed

src/components/Nav/Header.module.scss

@@ -63,7 +63,17 @@
     height: 80px;
   }
 
-  img {
+  a {
+    border: none;
+    color: #000;
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+.searchIcon {
   height: 32px;
   object-fit: contain;
   object-position: left;
@@ -76,16 +86,6 @@
   }
 }
 
-  a {
-    border: none;
-    color: #000;
-
-    &:hover {
-      background: none;
-    }
-  }
-}
-
 .usernav {
   display: inline-flex;
   padding-right: 0;

src/components/Nav/Header.tsx

@@ -120,7 +120,7 @@ export const Header = (props: Props) => {
               </For>
               <li class={styles.headerSearch}>
                 <a href="#">
-                  <Icon name="search" />
+                  <Icon name="search" iconClassName={styles.searchIcon} />
                   {t('Search')}
                 </a>
               </li>

src/components/Nav/Icon.tsx

@@ -1,14 +1,25 @@
+import clsx from 'clsx'
 import { mergeProps, Show } from 'solid-js'
+import type { JSX } from 'solid-js'
 import './Icon.css'
 
-export const Icon = (_props: any) => {
-  const props = mergeProps({ title: '', counter: 0 }, _props)
+type IconProps = {
+  className?: string
+  iconClassName?: string
+  style?: string | JSX.CSSProperties
+  title?: string
+  name?: string
+  counter?: number
+}
+
+export const Icon = (passedProps: IconProps) => {
+  const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class="icon" style={props.style}>
-      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} />
+    <div class={clsx('icon', props.className)} style={props.style}>
+      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
-        <div class="notifications-counter">{props.counter.toString()}</div>
+        <div class="notifications-counter">{props.counter}</div>
       </Show>
     </div>
   )