你可以在你的案例中使用@media查询。在你的图标组件中添加一个类，并为移动终端宽度编写媒体查询。

<FaSearch color="#023373" className="SearchIcon" />

字符串
在你的CSS中，这样做

.SearchIcon{
  font-size: 40px;
}

@media only screen and (max-width: 400px) {
  .SearchIcon {
    font-size: 20px;
  }
}

型
我使用Stackblitz创建了一个工作示例
下面是针对不同设备宽度的所有@media查询列表。

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

型

另一种方法是在它们的 Package 器上处理图标大小。您可以将图标大小设置为auto并更改它们的父级大小。您可以在媒体查询或任何其他方法中执行此操作。

<IconContext.Provider value={{ size: 'auto' }}>
  <App />
</IconContext.Provider>

字符串

对于那些对tailwind解决方案感兴趣的人，你可以在React Icon的context provider中使用tailwind的断点。参见下面的示例。
请注意，如果您还使用Next 13+，则<IconContext.Provider />只能在客户端组件中使用。

<IconContext.Provider value={{ className: text-[1em] lg:text-[5em] }}>
  { children }
</IconContext.Provider>

字符串