svg img -> react component

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

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>

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;