[React + TypeScript] Font Awesome 사용하기

리액트 Component에서 Font Awesome 사용하기

Font Awesome 패키지를 먼저 설치합니다.

npm i @fortawesome/fontawesome-svg-core

Font Awesome은 무료 버전 3가지를 사용할 수 있고, 3개 중 사용할 목적에 따라 설치합니다.

Regular & Solid

solid

npm i @fortawesome/free-solid-svg-icons

regular

npm i @fortawesome/free-regular-svg-icons

brands

브랜드 로고를 사용하려면 따로 설치해줘야 합니다.

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

React에서 사용 가능하도록

npm i @fortawesome/react-fontawesome

설치한 Font Awesome을 React에 import 하기

import React from "react";
import { 사용하려는 아이콘 명 } from "@fortawesome/free-solid-svg-icons";

리액트 Component 가 아닌 ts 파일에서 사용하기

먼저 Font Awesome 무료 패키지를 설치합니다.

npm install --save @fortawesome/fontawesome-free

 

이후 ts 파일 맨 상단에 import 해줍니다.

import '@fortawesome/fontawesome-free/js/all.js'

HTML에서 Font Awesome 아이콘 출력

이제 위의 세팅이 되었다면, ts 파일에서 Font Awesome 아이콘을 요소를 만들어서 아래처럼 출력해 보겠습니다.

방법 1

const icon = document.createElement('i')
icon.setAttribute('class', 'fa-solid fa-microphone')

방법 2

const icon = document.createElement('i')
icon.innerHtml = '<i class="fa-solid fa-microphone"></i>'