反应JS |图标

React 提供了一个内置的图标库，通过使用它，我们可以在项目中包含任意数量的图标。我们只需要通过提及我们想要添加的库名称和图标名称来在我们的app.js文件中导入模块。

先决条件：

• ReactJS 的基础知识
• 节点JS：
  • 在 Windows 上安装 Node.js
  • 在 Linux 上安装 Node.js
• 已经创建了 ReactJS 应用

下面所有步骤都按顺序描述了如何在 React 中添加图标和设计它们。

• 第 1 步：在进一步移动之前，首先您必须安装 react 图标库，通过在项目目录中运行以下命令，在 src 文件夹中的终端的帮助下，或者您也可以在项目文件夹中的 Visual Studio Code 终端中运行此命令.

npm install react-icons --save

• 第2步：安装图标库后，现在打开项目目录中预设的app.js文件，在src文件夹下并删除其中的代码预设。
  
• 第 3 步：现在通过访问以下链接打开 react-icons 库。这是 react 提供的内置 react-icons 库。打开 react-icons 后，现在从菜单中选择要添加的图标的类别和名称。单击后，您会在右侧看到许多图标和名称。在类别中，我选择游戏图标，从右侧选择GiPoliceBadge ，您可以根据需要选择任何其他图标。

https://react-icons.github.io/react-icons/icons?name=gi

• 第 4 步：现在在您的app.js文件中，添加以下代码：

import { IconName } from "react-icons/";

应用程序.js：

输出：

• 要查看输出，请在命令下方运行。

npm start

• 现在，npm 启动成功后，打开浏览器并在下面输入 url 以查看输出。

http://localhost:3000/

app.js：要更改图标的颜色和大小，请参见下面的代码。

javascript

import React, { Component } from "react";
  
// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
  
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            

                 
            
        );
    }
}
export default App;

输出：

app.js：添加多个图标，见下文

javascript

import React, { Component } from "react";
  
// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
import { MdAndroid } from "react-icons/md";
import { GoBroadcast } from "react-icons/go";
import { FaAmazon } from "react-icons/fa";
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            

                
                
                 
                 
            
        );
    }
}
export default App;

输出：