我如何添加一个图标到HTML嵌套在JS

Question

我正在尝试插入一个图标到JSX。我已经导入了图标，但我不知道如何将其添加到代码中。

import React, { useState, Fragment } from "react";
import styled from "styled-components";
import * as materialOutlined from '@styled-icons/material-outlined'
import {Search} from '@styled-icons/material'
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<Nav>
<Logo>
<img href="/" width="70%" height="70%" src="../static/images/telsem.png"/>
</Logo>
<SearchP>
<input class="search" type="text" id="search" placeholder="Search for...." />
<button type="submit">Search</button>
</SearchP>
</Nav>
);
};

---

"<button type="submit">Search</button>"  i want to change the Name Search into an icon

Answer 1

您已经从样式组件中导入了Search图标。你只需要在JSX代码中通过在花括号之间输入它来呈现它，它会计算JS代码。

<button type="submit">{<Search/>}</button>

由于它是一个组件，您可以将其渲染为<Search/>而不仅仅是Search。