React でFontAwsome を使う

Next.js

2022.12.12 2022.11.06

パッケージのインストール
アイコンを検索
使ってみる

パッケージのインストール

# コアパッケージの導入
npm i --save @fortawesome/fontawesome-svg-core


# アイコンパッケージの導入
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

# React用コンポーネントの導入
npm i --save @fortawesome/react-fontawesome@latest

アイコンを検索

検索して欲しいアイコンを探します。(無料で使えるものは限られています。)

React のコンポーネントはそのままでは使えないので注意してください。

使ってみる

使う方法は、いろいろあるみたいです。

ちなみに、うえの React のコンポーネントはそのままでは使えないので注意してください。

import { Box } from "@chakra-ui/react";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

const BtnCercleOrange = () => {
  return (
    <Box>
      <FontAwesomeIcon icon={faTrash} />
    </Box>
  );
};

export default BtnCercleOrange;