如何使用 react-fontawesome

介绍

React Fontawesome 是一个可以在 React 项目中使用 Font Awesome 图标库的组件，使用方便。

安装

在项目的根目录下，使用以下命令安装 React Fontawesome：

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

使用

在需要使用图标的组件中，按照以下方式导入需要使用的图标：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

// ...

<FontAwesomeIcon icon={faCoffee} />

也可以一次性导入一个图标集：

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// ...

library.add(faCoffee);

// ...

<FontAwesomeIcon icon="coffee" />

Props

• icon：图标
• size：大小
• color：颜色
• rotation：旋转度数
• flip：翻转
• pulse：脉动

示例

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

const Component = () => {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} size="lg" />
      <FontAwesomeIcon icon={faCoffee} size="2x" />
      <FontAwesomeIcon icon={faCoffee} size="3x" />
      <FontAwesomeIcon icon={faCoffee} size="4x" />
      <FontAwesomeIcon icon={faCoffee} size="5x" color="brown" />
      <FontAwesomeIcon icon={faCoffee} rotation={90} />
      <FontAwesomeIcon icon={faCoffee} flip="both" />
      <FontAwesomeIcon icon={faCoffee} pulse />
    </div>
  );
};

结语

React Fontawesome 是一个灵活方便的组件，可以在项目中轻松地使用 Font Awesome 图标库。记得去官网查看所有的图标库哦！