如何使用 npm 添加 React 图标

React 是一种十分流行的用户界面库，而图标是创建优秀用户界面的关键。在本文中，我们将学习如何使用 npm 添加 React 图标。

步骤 1 - 创建 React 应用

首先，我们需要创建一个 React 应用程序。我们可以使用 create-react-app 快速生成一个新的应用。

npx create-react-app my-app
cd my-app

将应用程序启动并访问 http://localhost:3000 来查看应用，以便确保我们已准备好接下来的步骤。

npm start

步骤 2 - 安装 react-icons

接下来，我们需要安装 react-icons，它是一个专门为 React 应用程序设计的图标库。我们可以通过运行以下命令来安装它：

npm install react-icons --save

步骤 3 - 导入所需的图标

在我们的应用程序中使用 react-icons 而不导入所需的图标是不可能的，因此，让我们开始导入需要的图标之一。

我们会导入 GoBack 图标，它是由 react-icons/fa 程序包提供的。

在我们的 App.js 文件中添加以下代码：

import { FaArrowLeft } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My App</h1>
        <FaArrowLeft />
      </header>
    </div>
  );
}

export default App;

在此代码中，我们导入了 GoBack 图标并在标题旁边将其放置。

步骤 4 - 更改图标样式

我们可以使用行内样式或 CSS 类来更改图标的样式。

在此示例中，我们将创建一个 ArrowLeft.css 文件，并在其中指定以下样式：

.arrow-left-icon {
  color: blue;
  font-size: 2rem;
  margin-right: 10px;
}

接下来，在我们的 App.js 文件中导入此文件并将其应用于图标：

import { FaArrowLeft } from 'react-icons/fa';
import './ArrowLeft.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My App</h1>
        <FaArrowLeft className="arrow-left-icon" />
      </header>
    </div>
  );
}

export default App;

在此代码中，我们已将 ArrowLeft.css 文件导入到我们的 App.js 文件中，并将样式应用于我们的 GoBack 图标的 className。

步骤 5 - 扩展您的 React 应用

现在我们已经知道如何使用 react-icons 添加图标，是时候开始在您的 React 应用程序中使用您喜欢的其他图标了。不要停止于此 - 探索 react-icons 中的其他图标或使用其他图标集来改善您的应用程序。