如何将图标作为道具传递？

Question

我正在使用道具，我想要第一个可以添加的“optionText”和“optionIcon”，但我无法将图标实现为道具

我正在创建道具的文件

import Icon from "@mui/material/Icon";

function HeaderMenuOptions({ optionText, OptionIcon }) {
  return (
    <div className="flex items-center text-center">
      <Icon>{OptionIcon}</Icon>
      <h1 className="py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer">
        {optionText}
      </h1>
    </div>
  );
}

export default HeaderMenuOptions;

我使用上述道具的文件

        <div className="absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center">
          <p className="menu-header mt-2">VIEW OPTIONS</p>

          <div className="flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group">
            <HeaderMenuOptions optionText="Night Mode" />
            <CheckBoxIcon
              defaultChecked
              onClick={() => alert("Light mode has not been added yet!")}
              className="cursor-pointer text-blue-500"
            />
          </div>

          <p className="menu-header">MORE STUFF</p>
          <HeaderMenuOptions optionText="Premium" OptionIcon={SecurityIcon} />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
          <HeaderMenuOptions optionText="TEST" />
        </div>

谁能帮帮我。谢谢

Answer 1

HeaderMenuOptions 看起来不错。您需要更改父组件。

你可以这样做。

<HeaderMenuOptions optionText="Premium" OptionIcon={<SecurityIcon />} />

如何将图标作为道具传递？

How to pass an icon as a prop?

icons

reactjs

next.js

tailwind-css