如何在react中使用google图标

Question

我很困惑，当我在网上阅读时，有人说“使用材料用户界面”，有人正在使用反应图标。当我在 stackoverflow 上看到它时，这个问题的答案已经很老了，大约 7-9 岁。我想要新的答案。请各位前辈帮帮我。我将不胜感激您的回答。

Answer 1

要在 React 项目中使用 Google Icons，请按照以下步骤操作：

1. 将 google 图标 cdn 包含到您的主 index.html 文件中

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
   

2. 为图标的默认样式创建一个 CSS 对象，请务必使用全局 CSS 文件

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet"/>

<span class="material-icons">star</span>

默认图标已填充 - 您还可以使用图标的不同变体 - 例如：轮廓、圆形、锐利和两种色调

对于上述每一项，您只需将类从“material-icons”修改为“material-icons-outlined”、“material-icons-round”、“material-icons-sharp”、“material-icons-two” -tone” 分别。