From 4577de5edbf023d9cdd87a0a6389f5b203b2c7de Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Sat, 21 Jan 2023 15:12:24 +0500
Subject: [PATCH] svg img -> react component

---
 src/components/header/SearchForm.tsx |  4 ++--
 src/components/header/SubHeader.tsx  |  4 ++--
 src/styles/_header.scss              | 10 ----------
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/components/header/SearchForm.tsx b/src/components/header/SearchForm.tsx
index f0dcb95..b7d0cd1 100644
--- a/src/components/header/SearchForm.tsx
+++ b/src/components/header/SearchForm.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { motion } from 'framer-motion';
 
 // Icons
-import LoopGray from '../../assets/icons/loop-gray.svg';
+import { ReactComponent as LoopGray } from '../../assets/icons/loop-gray.svg';
 
 // Animations
 import { searchFormAnimation } from '../../animations/header.animations';
@@ -19,7 +19,7 @@ const SearchForm = () => {
         <motion.div
           initial={'rest'}
           animate={input.length > 0 ? searchFormAnimation.hover : searchFormAnimation.rest}>
-          <img src={LoopGray} alt="" />
+          <LoopGray />
           <span>Search anything</span>
         </motion.div>
         <input
diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx
index 81fd17e..a24c2a8 100644
--- a/src/components/header/SubHeader.tsx
+++ b/src/components/header/SubHeader.tsx
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Logo from '../../assets/images/logo.png';
 
 // Icons
-import ArrowDownBlack from '../../assets/icons/arrow-down-black.svg';
+import { ReactComponent as ArrowDownBlack } from '../../assets/icons/arrow-down-black.svg';
 
 // Components
 import SearchForm from './SearchForm';
@@ -40,7 +40,7 @@ const SubHeader = () => {
               <div className="language-trig">
                 <span>EN</span>
                 <div>
-                  <img src={ArrowDownBlack} alt="" />
+                  <ArrowDownBlack />
                 </div>
               </div>
             </div>
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
index fd79df5..e11d736 100644
--- a/src/styles/_header.scss
+++ b/src/styles/_header.scss
@@ -31,11 +31,6 @@
   top: 0;
   left: 50%;
   transform: translateX(-50%);
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
 }
 
 // NAV
@@ -171,11 +166,6 @@
       align-items: center;
       gap: 0.8rem;
 
-      img {
-        width: 1.3rem;
-        height: 1.3rem;
-      }
-
       span {
         font-size: 1.6rem;
         color: $gray;