如何将图标添加到嵌套在 JS 中的 HTML

Posted 2023-03-15

【中文标题】如何将图标添加到嵌套在 JS 中的 HTML

【英文标题】：how can i add an icon to HTML nested in JS

【发布时间】：2021-06-08 17:43:02

【问题描述】：

我正在尝试在 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="/"   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

【问题讨论】：

我试过了，当我这样做时，它只会向我显示文本中的代码输出，并且我正在使用 styled-components 顺便说一句，当我尝试其他方式时它有时会变为空白

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

【参考方案1】：

您已经从 styled-components 导入了 Search 图标。您只需在 JSX 代码中通过在花括号之间键入它来呈现它，这会评估 JS 代码。

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

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

【讨论】：

我需要帮助，我无法设置我插入的图标的样式，你知道我可以如何使用 styled-components 吗？？

查看styled-components guide，他们展示了如何应用自定义样式。也许有帮助！