React Icons在 React 中使用图标的最简单方法

目录

    * [Overview](#chapter-1)
    * [Getting Started](#chapter-2)
    * [Step 1](#chapter-3)
    * [Step 2](#chapter-4)
    * [Step 3](#chapter-4)
    * [Conclusion](#chapter-5)

概述

今天我们将讨论在 React 中使用 SVG 图标的最简单方法。我们将使用一个 npm 包，它使我们能够使用一些最知名的图标库中的图标。

我们将要讨论的包名为 React-Icons。npm
页面链接：https://www.npmjs.com/package/react-icons

入门

如果您愿意继续关注，请随意克隆此存储库，因为这是我们将用于样板的内容：https://github.com/kevinsims1/bare-react

我假设您从现在起已经克隆了 repo。

步骤 1

在项目根目录中打开终端并使用此命令：
npm install react-icons

这将下载我们的包并让我们能够完全访问它。

第 2 步

现在在代码编辑器中打开样板。

React Icons 可让您从以下所有图标库中选择图标：

要使用它们，您需要做的就是使用与库相关的导入。

以下是每个相关导入的示例：

转到 bare.js 文件并在第 1 行后添加以下导入：

import {FaTwitter} from "react-icons/fa"

现在删除返回语句并添加以下内容：

const Bare = () => {
  return (
    <div>
      <FaTwitter />
    </div>
  )
}

进入你的终端并输入：npm run start

您应该会看到一个页面，其左上角有此图标：

正在运行！

但是...有点太平淡了。

步骤3

React Icons 解决了这个问题，它允许你导入一个 IconContext 组件，这个组件可以让你对图标进行很多很酷的操作。我们将用它来给我们的图标添加一些样式。

在第一个导入之后添加这个导入：

import {IconContext} from "react-icons"

现在将我们的图标包装在 IconContext 组件中，如下所示：

const Bare = () => {
  return (
   <IconContext.Provider>
    <div>
      <FaTwitter />
    </div>
   </IconContext.Provider>
  )
}

现在我们需要做的就是在 IconContext 组件中添加一个值属性，并传递一个对象。在该对象内部添加一个名为 style 的键，并赋值给它一个对象值，然后开始设置样式。

例子：

const Bare = () => {
  return (
   <IconContext.Provider value={{ style: {fontSize: '30px', color: "rgb(0, 123, 255)"}}}>
       <div>
         <FaTwitter />
       </div>
    </IconContext.Provider>
  )
}

如果你返回浏览器，你现在应该看到以下内容：

结论

本教程就到这里。如果您喜欢，请花点时间点个赞，以帮助下一位开发者。谢谢。