React에서 Font Awesom 아이콘 무료로 사용하는 법

여러 아이콘을 사용할 수 있는 대표적인 서비스인 Font Awesome을 리액트에서 사용하는 법입니다.

1. Set Up with React

2. Add Icons with React

Add Icons with React

자세한 내용은 위의 링크에서 확인할 수 있습니다. 저는 위 방법을 그대로 따라해 보겠습니다.

---

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

저는 무료버전의 아이콘을 사용할 것이기 때문에 free icon을 인스톨 해 주었습니다.

npm i --save @fortawesome/react-fontawesome@latest
npm i babel-plugin-macros

위 두개를 실행해 준 다음. 진행중인 프로젝트의 루트 디렉토리로 이동합시다.

---

루트 디렉토리에 babel.config.js파일과 babel-plugin-macros.config.js파일을 만들어 아래와 같이 작성해 줍시다.

//babel.config.js
module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

//babel-plugin-macros.config.js
module.exports = {
	'fontawesome-svg-core': {
		'license': 'free'
	}
}

---

이제 모든 준비가 완료되었습니다. 

Font Awesome 홈페이지에서 마음에 드는 아이콘을 골라서 확인해줍시다.

위와 같이 <FontAwesomeIcon icon="fa-solid fa-plus"> 라고 나오는데, 저렇게 적지 마시고,

아래와 같이 적어줍시다.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
...
                <FontAwesomeIcon
                  icon={icon({ name: "plus", style: "solid" })}
                  style={{ height: 21, width: 21 }}
                />

이렇게 아이콘을 사용할 수 있습니다.

 

참고로 아이콘의 name prop은 사용하고자 하는 아이콘의 이름이고,

style과 family props의 type은 아래와 같습니다.

export type IconMacroParams = {
    name: IconName,
    style?: IconStyle,
    family?: IconFamily
};

export type IconFamily = "classic" | "sharp" | "duotone";
export type IconStyle = "solid" | "regular" | "light" | "thin" | "duotone" | "brands" ;