React-icons

在计算世界中，图标被定义为显示在计算机屏幕上的图形表示或图画，它们传达了某种含义。图标传达了将它们彼此区分开来并使事物独特存在的特征。在所有这些方面，它们也被称为符号，这些符号可以快速理解关于软件工具、功能、文件、数据的想法。图标代表了包含详细插图的真实实体，并且设计成一个符号就能说明一切。

在本文中，我们将专门讨论 React Icons。React 是一个强大、动态且智能的库。它拥有所有使其独一无二的资产。我们还将在这篇文章中学习 React Icons 的是什么、怎么用以及为什么使用它们，并通过实际实现来展开讨论。让我们来了解更多关于 React Icons 的信息。

什么是 React Icons？

React 是一个 JavaScript 库。同样，React Icons 也是一个开源库，可以将应用程序世界中的所有图标一次性带到一个目录中。

为什么使用 React Icons？

以下原因可以正确说明为什么选择 React Icons。

1. 在某些情况下，一个库可能不包含所有必需的图标。因此，会出现安装其他库以将其导入项目目录的问题。React Icons 使开发人员不必为这些图标安装不同类型的包。
2. React Icons 广泛利用 ES6 导入，这使我们能够仅包含当前项目必需的图标。因此，它消除了空间相关的混乱。
3. React Icons 专为 React 设计。这意味着它只针对 React 定制，在我们的 React 项目中使用它不会出现任何问题。
4. 实现起来非常简单。

开始

要开始实际可视化 React Icons，我们需要做的就是添加一个 node 包并导入我们想要的组件。为此，我们需要使用 npm 通过以下命令安装包。

安装（标准项目）

用途

安装（用于 meteorjs、gatsbyjs 等）

用途

导入 React Icons

导入 React 图标非常简单。它遵循此规则或语法。

例如，假设我们从库中导入多个图标。使用 ES6 解构功能，我们可以在一行代码中完成。请参见下面的代码作为参考。

现在，为了进一步推进，请在 App.js 文件中添加以下代码并导入所有必需的图标。下面展示了导入多个图标的方法。

输入图标标签

在 App.js 文件中从 React Icons 导入图标后，我们可以在文件中的任何位置使用它，就像我们知道的任何 HTML 标签一样。请参考下面的代码，其中我们将在 navbar-header 的 div 标签内的 nav 部分进行操作。在 h1 标签之前和之后添加两个图标，如下所示。

图标将显示如下。

就像这样，我们可以将多个图标添加到应用程序的不同部分。就这么简单。

图标样式

通常有多种方法可以为图标设置样式。在这种情况下，我们将仅使用两种方法来设置 React 图标的样式，以保持它们整洁易懂。

1. React Context API。
2. Styled component。

使用 React Context API

我们可以选择为 React 中的一个或多个图标设置样式。我们需要将所有图标包装在标签中，并设置标签中所需图标的样式。

为了理解如何做到这一点，请导入 Context API 并将其添加到文件顶部，如下所示。

让我们按照下面所示的代码在 App.js 文件中为添加的 React 图标设置样式。

上面的 CSS 代码将增加字体大小。要可视化此效果，请打开浏览器，结果应如下所示。

让我们继续为单个元素设置样式。为此，首先更改另一侧存在的每个图标的颜色。下面的整体代码片段可以帮助我们。

React Icons 中的 Styled Components

假设我们熟悉 Styled components，让我们通过命令行安装此组件，如下所示。

导入 Styled Components

用途

现在，向下滚动到 App.js 中的最后一行，并添加如下所示的样式。

添加另一个 styled component，例如警报，如下所示。

要将这些 styled components 应用于 App.js 文件中使用的图标，请使用下面显示的方法。

请注意，我们所做的只是将组件重命名为 styled-components 并保存更改。就这么简单。最终输出可能看起来像这样。

这是使我们熟悉 React Icons 以及如何使用 React Icons 的不同组件在网站或 Web 应用程序上添加不同类型图标的一个示例。

让我们看一下使用 React Icons 的一些优点和缺点。

优点

优点如下

1. React Icons 的特点是每次只导入所需的图标，或者根据需要导入一个或多个。
2. React 中的图标易于使用。有了 React Icons，一个库即可在一个地方提供所有图标。其他图标生成器或目录需要将依赖项添加到现有项目或安装它们，但 React Icons 则不需要。
3. React 对 JavaScript 开发人员来说很容易学习，并且借助 React Icons 的功能，他们无需编写任何额外的 CSS 即可在他们正在处理的应用程序上生成图标。
4. CSS 需要精确，但有了 React Icons，我们不必太在意 CSS。虽然尺寸和颜色可以轻松修改，但它比 React Icons 相对容易。

缺点

1. React Icons 需要多个导入。即使在 App.js 文件中需要导入一个或多个图标，导入的数量也与图标的数量成正比。
2. 除了导入之外，React Icons 仅限于 React。虽然它们可以不使用库和框架而使用，但它们最适合 React，这可能对其他框架来说是一个缺点。

结论

图标是不可或缺的一部分，无需解释。它们在区分软件的用户界面和使其在同类产品中独具特色方面发挥着至关重要的作用。它还向用户展示了一些用户看到的重要功能以及他们如何使用它们。React Icons 中有许多可用的图标，用户只需简单导入即可随时使用。

此外，值得注意的是，我们可以在单个包中获得 React 项目所需的所有图标。使 React Icons 独一无二的另一个原因是它们非常易于使用。在本教程中，我们看到了除了 React Icons 之外，还可以如何使用不同类型的其他组件来设计和开发我们的项目。我们还了解了如何开始使用 React icons 并为标准项目和其他框架安装它们。之后，我们学习了 React Icons 的优缺点。React 易于学习和实现，前提是需要熟练掌握 JavaScript 并在此基础上稍作扩展。React Icons 也有助于清晰地传达想法。