Adding .png Logo to my Navigation bar with react styled components - reactjs

Question

hello I am trying to start a beginner react project using react and styled components. I was following a tutorial that showed me how to import some stock react logos, but I can't figure out how to do it using my own image.
export const NavbarContainer = styled(Container)`
display: flex;
justify-content: space-between;
height: 80px;
${Container}
`;
export const NavLogo = styled(Link)`
color: #fff;
justify-self: flex-start;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
`
export const NavIcon = styled(Icon)`
margin-right: 0.5rem;
`
Below is the code for my navigation bar
import React from 'react';
import { Nav, NavbarContainer, NavLogo, NavIcon } from './Navbar.elements';
import { ReactComponent as Icon } from './icon.png';
const Navbar = () => {
return (
<>
<Nav>
<NavbarContainer>
<NavLogo to="/">
<NavIcon />
SKYPRECISION
</NavLogo>
</NavbarContainer>
</Nav>
</>
)
}
export default Navbar

Answer 1

You need to add an img tag like this
<img src={src} alt="My awesome logo" />
You can replace the NavIcon with that.
If you want that image to utilize styled-components you can do something like:
const MyImage = styled.img`
your css rules here
`
and use it in code
<NavLogo to="/">
<MyImage />
SKYPRECISION
</NavLogo>