将SVG图像导入导航栏反应js答案

【问题标题】：Import SVG image to navbar react js将SVG图像导入导航栏反应js
【发布时间】：2022-01-03 16:51:53
【问题描述】：

我正在努力描述我需要搜索的问题，因此我将在此处发布我遇到的代码和问题，希望高级前端开发人员可以帮助我解决问题。

所以我正在处理这个自动取款机...

看看它在哪里说 Junodrop 我想用一个 SVG 文件形状的徽标替换它，以便我可以显示它。

导航栏部分编码标识如下。

import { Link as LinkR } from 'react-router-dom'
import { Link as LinkS} from 'react-scroll'

export const Nav = styled.nav`
 background: #000;
 height: 80px; 
//  margin-top: -80px;
 display: flex;
 justify-content: center; 
 align-items: center;
 font-size: 1rem;
 position: sticky;
 top: 0;
 z-index: 10;

 @media screen and (max-with: 960px) {
     transition: 0.8s all ease;
 }
`;

export const NavbarContainer = styled.div`
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1; 
  width: 100%; 
  padding: 0 24px;
  max-width: 1100px;
`;

export const NavLogo = styled(LinkR)`
color: #fff;
justify-self: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`;

export const MobileIcon = styled.div`
 display: none;

 @media screen and (max-width: 768px) {
     display: block;
     position: aboslute;
     top: 0;
     right: 0;
     transform: translate(-100%, 60%);
     font-size: 1.8rem;
     cursor: pointer; 
     color: #fff;
  }
`;

export const NavMenu = styled.ul`
 display: flex;
 align-items: center;
 list-style: none;
 text-align: center;
 margin-right: -22px;

 @media screen and (max-width: 768px) {
     display: none;
  }
`;

export const NavItem = styled.li`
  height: 80px;
`;

export const NavLinks = styled(LinkS)`
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  cursor: pointer;

  &.active {
      border-bottom: 3px solid #01bf71;
  }
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;

  @media screen and (max-width: 768px) {
    display: none;
  }
`

export const NavBtnLink = styled(LinkR)`
  border-radius 50px;
  background: #01bf71;
  white-space: nowrap;
  padding: 10px 22px;
  color: #010606;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`; ``` 

I am struggling how to do this with in a ``` `` ``` 

Anyone got an idea of what i need to write for this? 

p.s my svg file would be stored in ```junodrop.io/src/images```

Thank you for reading

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

从文件夹中导入徽标图像并将其放入图像 src 不要显示来自 CSS background-image 属性的网站徽标，这不是一个好习惯。

import Logo from "../junodrop.io/src/images"


<img src={Logo} alt="logo" />

或者您可以简单地复制 SVG 标记并将其直接放到网站上，如果您遇到错误，您可以使用一些 SVG 属性来使用类似这样的 SVG 优化器

https://jakearchibald.github.io/svgomg/

https://svgoptimizer.com/

【讨论】：