Hướng dẫn cài đặt Font Awesome trên React

Bài viết này sẽ hướng dẫn bạn cách cài đặt Font Awesome trên React.

Đầu tiên, hãy cài đặt các gói cần thiết:

Với YARN

yarn add @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

Với PNPM

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

Với NPM

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

Tiếp theo, import các icon bạn cần và sử dụng chúng trong component trên React của bạn:

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

const MyComponent = () => {
  return (
    <div style={{ padding: 50 }}>
      <p>
        <FontAwesomeIcon
          icon={faClock}
          style={{ fontSize: 100, color: 'blue', marginRight: 30 }}
        />
        <FontAwesomeIcon
          icon={faUserCircle}
          style={{ fontSize: 100, color: 'orange' }}
        />
      </p>
      <p>
        <FontAwesomeIcon
          icon={faCoffee}
          style={{ fontSize: 200, color: 'brown' }}
        />
      </p>
    </div>
  );
};

export default MyComponent;

Kết quả sau khi thêm Font Awesome:

Bạn có thể tìm thấy tất cả các icon có sẵn trong tệp sau: /node_modules/@fortawesome/free-solid-svg-icons/index.d.ts