header search icon styles fixed

src/components/Nav/Header.module.scss

@@ -63,19 +63,6 @@
     height: 80px;
   }
 
-  img {
-    height: 32px;
-    object-fit: contain;
-    object-position: left;
-    transition: height 0.2s;
-    vertical-align: middle;
-    width: 100px;
-
-    @include media-breakpoint-up(lg) {
-      width: 175px;
-    }
-  }
-
   a {
     border: none;
     color: #000;
@@ -86,6 +73,19 @@
   }
 }
 
+.searchIcon {
+  height: 32px;
+  object-fit: contain;
+  object-position: left;
+  transition: height 0.2s;
+  vertical-align: middle;
+  width: 100px;
+
+  @include media-breakpoint-up(lg) {
+    width: 175px;
+  }
+}
+
 .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>
   )