Reactjs 是否为两个不同的图标创建一个样式化组件？

所以我使用react图标，我有两个不同的图标，我用样式化的组件来设置样式。我的问题是，它们基本上有完全相同的样式，但唯一的区别是我选择的图标样式

我不知道如何将两个图标组合成一个样式化的组件

这是我的密码

      const backArrow = styled(IoArrowBack)`
        width: 50px;
        height: 50px;
      `;

      const forwardArrow = styled(IoArrowForward)`
        width: 50px;
        height: 50px;
      `;

因为我使用的是样式化组件，所以我只需将图标传递到

（）

，根据我想要的样式进行设置。问题是我有超过12行的两个图标样式完全相同。重复确切的样式是没有意义的

如何创建一个样式化组件，但显示两个不同的图标

例如这样的概念

 const arrowIcon = styled(IoArrowBack, IoArrowForward)`
    width: 50px;
    height: 50px;
 `

但是如果我将它们添加到我的JSX中，问题就会出现

因为那我怎么才能添加代码呢

我做不到

  <arrrowIcon>Back arrow</arrowIcon>
  <arrrowIcon>Forward arrow</arrowIcon>

返回箭头
前进箭头

所以它不知道哪个图标是哪个

---

对于样式化的组件，这是可能的，还是我只需要为每个图标复制并粘贴相同的样式？

这段代码对我来说有点奇怪，我认为这不是有效的代码

const arrowIcon = styled(IoArrowBack, IoArrowForward)`
        width: 50px;
        height: 50px;
     `

但是，您可以使用一些技巧来获得共享的样式

const sharedIconStyle = css`
            width: 50px;
            height: 50px;
`

及

---

你能用React吗

import React from "react";
import "./styles.css";

import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";

export default function App() {
  return (
    <div className="App">
      <SizedIcon Icon={icon1} />
      <SizedIcon Icon={icon2} />
    </div>
  );
}

const SizedIcon = ({ size = 50, Icon }) => {
  console.log(typeof Icon);
  return (
    <div>
      <Icon width={size} height={size} />
    </div>
  );
};

从“React”导入React；
导入“/styles.css”；
从“/icons/1.svg”导入{ReactComponent as icon1}”；
从“/icons/2.svg”导入{ReactComponent as icon2}”；
导出默认函数App（）{
返回(
);
}
const SizedIcon=（{size=50，Icon}）=>{
console.log（图标类型）；
返回(
);
};

---

啊，是的，那句话只是“逻辑”，但实际上不起作用。但你的共享式方法最终还是奏效了

import React from "react";
import "./styles.css";

import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";

export default function App() {
  return (
    <div className="App">
      <SizedIcon Icon={icon1} />
      <SizedIcon Icon={icon2} />
    </div>
  );
}

const SizedIcon = ({ size = 50, Icon }) => {
  console.log(typeof Icon);
  return (
    <div>
      <Icon width={size} height={size} />
    </div>
  );
};