svg img -> react component

This commit is contained in:
Kakabay 2023-01-21 15:12:24 +05:00
parent a01b87dc3f
commit 4577de5edb
3 changed files with 4 additions and 14 deletions

View File

@ -3,7 +3,7 @@ import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
// Icons // Icons
import LoopGray from '../../assets/icons/loop-gray.svg'; import { ReactComponent as LoopGray } from '../../assets/icons/loop-gray.svg';
// Animations // Animations
import { searchFormAnimation } from '../../animations/header.animations'; import { searchFormAnimation } from '../../animations/header.animations';
@ -19,7 +19,7 @@ const SearchForm = () => {
<motion.div <motion.div
initial={'rest'} initial={'rest'}
animate={input.length > 0 ? searchFormAnimation.hover : searchFormAnimation.rest}> animate={input.length > 0 ? searchFormAnimation.hover : searchFormAnimation.rest}>
<img src={LoopGray} alt="" /> <LoopGray />
<span>Search anything</span> <span>Search anything</span>
</motion.div> </motion.div>
<input <input

View File

@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
import Logo from '../../assets/images/logo.png'; import Logo from '../../assets/images/logo.png';
// Icons // Icons
import ArrowDownBlack from '../../assets/icons/arrow-down-black.svg'; import { ReactComponent as ArrowDownBlack } from '../../assets/icons/arrow-down-black.svg';
// Components // Components
import SearchForm from './SearchForm'; import SearchForm from './SearchForm';
@ -40,7 +40,7 @@ const SubHeader = () => {
<div className="language-trig"> <div className="language-trig">
<span>EN</span> <span>EN</span>
<div> <div>
<img src={ArrowDownBlack} alt="" /> <ArrowDownBlack />
</div> </div>
</div> </div>
</div> </div>

View File

@ -31,11 +31,6 @@
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
} }
// NAV // NAV
@ -171,11 +166,6 @@
align-items: center; align-items: center;
gap: 0.8rem; gap: 0.8rem;
img {
width: 1.3rem;
height: 1.3rem;
}
span { span {
font-size: 1.6rem; font-size: 1.6rem;
color: $gray; color: $gray;