React에서 Font Awesome 아이콘 사용하기

리액트에서 Font Awesome 아이콘을 사용하는 방법을 알아보자.

모든 내용은 Font Awesome 공식사이트에 나와있다.

우선 위 공식사이트 문서를 보면, 무료 아이콘을 사용하려면 다음과 같이 설치를 해야한다.

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

*추가로 브랜드 아이콘을 사용하고 싶다면 다음을 설치하자

$ npm i --save @fortawesome/free-brands-svg-icons

이후에 다음과 같이 사용할 수 있다.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

export const Login = () => {
  return <FontAwesomeIcon />;
};

이제 설치한 라이브러리를 이용하여, 아이콘prop을 설정해주자.

import { faSmile } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

export const Login = () => {
  return <FontAwesomeIcon icon={faSmile} />;
};

그러면 다음과 같이 화면에 나타난다!

props로 color, size, inverse, rotation 등등 다양한 props로 아이콘을 표현할 수 있으니, 자세한 것은 공식문서를 확인해보자!!😉