svg img -> react component
This commit is contained in:
parent
a01b87dc3f
commit
4577de5edb
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue