在 REACT 中使用图标

React 是一个流行的 JavaScript 库，用于构建 Web 应用程序。在 React 中，可以很容易地使用图标来增强应用程序的视觉效果。本文将介绍如何在 React 中使用图标。

安装图标库

在 React 应用程序中使用图标，需要添加一个支持图标的库。常用的图标库有 FontAwesome 和 Material Icons 等。

安装 FontAwesome 库的方式如下：

npm install --save @fortawesome/fontawesome-free

安装 Material Icons 库的方式如下：

npm install --save @material-ui/icons

使用 FontAwesome

安装 FontAwesome 库后，在 React 中使用这个库的步骤如下：

1. 在应用程序中引入FontAwesome库

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
library.add(faCoffee);

2. 在组件中使用图标

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <FontAwesomeIcon icon="coffee" />
      </div>
    );
  }
}

使用 Material Icons

安装 Material Icons 库后，在 React 中使用这个库的步骤如下：

1. 在应用程序中引入 Material Icons 库

import DeleteIcon from '@material-ui/icons/Delete';

2. 在组件中使用图标

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <DeleteIcon />
      </div>
    );
  }
}

总结

在 React 中使用图标可以为应用程序增加视觉效果。本文介绍了如何在 React 中使用 FontAwesome 和 Material Icons 库来使用图标。安装过程和使用方式都十分简单。