我相信这个链接会有帮助
How to Style React-Icons

TL;DR：避免混合太多不同的图标集

图标的大小和规格没有标准。这适用于svg库和图标字体。
大多数图标库都被设计为为所有图标提供一致的视觉大小和重量。
就像普通字体一样-有些字体的大写字母高度更高，比其他字体更大胆。
你能做的就是减少不同图标集的数量，并记住不同图标的来源。
这样，您可以定义调整规则来规范化视觉大小。

图标字体示例

@charset "UTF-8";
@font-face {
  font-family: "icomoon";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAALwAA0AAAAABvAAAAKZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCbhEICoJYghsLEgABNgIkAyAEIAWDGwdZG7gFyJ6DTZmLN0YIkoUnw0guc4+PcPHwtL+nc2fmYSVEJqvBoYmJ6kLdlDa5ivlbtZY9z+iCuP8BJvmAYb7YfxsiR8bky0elIiOZVMpwMv7n/2bcEgzLxjTJLIs/BhqthQGmPQ/DdUvHWigBHusJ3+6cRYtj8XBoh0PyyyPK5zQTAt48iJcAn3Z8//G5A90xECQhNEJBQs4vcQ1C0n3eOa5Cfnw1L6RgOdFb6RL0a0AOdUKWZJSAAOpohFw/HIGD+EK2RWA16KmV1MLoz/icfg3o/APwDTrXg4Tmov6UhZ4AIGSihsgAkUCCv0xQwCdCdKhBC3qDBrvBUQAFEAijpqxIuXZgPBlcsizzeWQp3mG+m98VW/dCnpQkR48sn+edPu4qIxm6XjgN/spG+Dwra3oWrK52lQXWB3rdpAzU+yte3xjkOwpO6KIzG93kwTXYcnutPwDA082X3dzJqdCH677EC6Wx8+xsNHdo2Z3RXGlpiAsN4GDdwOnUXeq37169RXbfICzruVzlIEtxiZEd/CRo0wbrAnWRTsZ3aROrwiq3u8IywgLjw5JnkkHX9ofjvsqwKgACwYz3L2zqBf8lcgHmZTQUeSeglUAw4sUKKOifQlsAxBYAoLC1IL+GSqC1EA8kAAD09AqB0OiNQNKYjEDWWIJA0diOQKWbwwjUGrcQ6GqoC1kUKUJPMpSwwVDGZkMFW05UBrITtZ7OD9nVfLt6uQwbNGzYEBxa+5MMDwEbefhMGuAwBu/TkqA2Zkm4lceYcb3OCBZpGJxc6SxprA1gKWmdEMHHY6gLy2GCh5veaVaEOsSaQBrclgP7OKhzDf/sMAOQ+FVbIiEFHzkEJCSRyDcwO+K3iCeHehljCa/KYwy2atXMkgUAAAA=") format("woff2");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-home1:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-home3:before {
  content: "";
}

body {
  font-size: 5em;
}

p {
  margin: 0;
}

span {
  border: 1px solid #ccc;
  display: inline-block;
}

.adjust span {
  border: none;
  width: 1em;
  vertical-align: -0.08em;
}
.adjust .fontawsome {
  transform: scale(0.95);
}
.adjust .material {
  transform: scale(1);
}
.adjust .icomoon {
  transform: scale(0.85);
}

<p><span class="fontawsome icon-home"></span>
<span class="material icon-home1"></span>
<span class="icomoon icon-home3"></span>
</p>

<p class="adjust">
  <span class="fontawsome icon-home"></span> Home
</p>
<p class="adjust">
<span class="material icon-home1"></span> Home
</p>
<p class="adjust">
<span class="icomoon icon-home3"></span> Home
</p>

SVG图标

一些图标可能有一个非常紧凑的viewBox，其他的可能有一些填充周围的等宽大小......和其他可能没有任何viewBox -通常不是一个伟大的想法，为响应式图标的使用。
你也可以使用像icomoon.io这样的web应用程序在生成字体/svg集之前调整大小。

因此，通常最好选择一个图标集/库，理想地涵盖所有需要的图标。
其他图标（来自不同的库）应具有远程相似的度量和样式（例如，“FontAwesome”等圆角与“Material icons”中的尖角）。