React/Next.js FontAwesome 설치 및 활용

---
name: React/Next.js FontAwesome 설치
description: Use when the user asks to install FontAwesome in a React or Next.js project, configure its components, and address common SSR styling issues.
version: 1.0.0
source: /home/son/prj/resume/backup_notes_260317/notion/Tech Note/fontawesome install in react d6b1ef15ff754cdf8dd7667668866a23.md
---

# fontawesome install in react

Next.js에서 FontAwesome를 사용하려면 먼저 패키지를 설치해야 합니다. 아래의 단계를 따라 설치하실 수 있습니다.

1. 터미널을 열고, 프로젝트 디렉토리에서 아래 명령어를 실행하여 필요한 패키지를 설치합니다.

```bash
bashCopy code
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

```

위의 명령어는 FontAwesome의 핵심 라이브러리(**`fontawesome-svg-core`**), 기본 아이콘 세트(**`free-solid-svg-icons`**), 그리고 React 컴포넌트(**`react-fontawesome`**)를 설치합니다.

1. 설치가 완료되면, 이제 아이콘을 사용할 수 있습니다. 아래의 예제 코드를 참고해보세요.

```
jsxCopy code
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

const IconComponent = () => {
  return <FontAwesomeIcon icon={faCoffee} />;
};

```

위의 코드에서, **`faCoffee`**는 coffee cup 아이콘을 나타내며, **`FontAwesomeIcon`** 컴포넌트에 **`icon`** prop으로 전달되어 화면에 렌더링됩니다.

1. 만약 다른 종류의 아이콘을 사용하려면, 해당 아이콘의 패키지를 설치해야 합니다. 예를 들어, 브랜드 아이콘을 사용하려면 아래의 명령어로 **`free-brands-svg-icons`** 패키지를 설치하세요.

```
bashCopy code
npm install @fortawesome/free-brands-svg-icons

```

이제 브랜드 아이콘을 사용할 수 있습니다:

```
jsxCopy code
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

const BrandIconComponent = () => {
  return <FontAwesomeIcon icon={faGithub} />;
};

```

위의 코드에서 **`faGithub`**는 Github 아이콘을 나타냅니다. 다른 아이콘들도 같은 방식으로 사용할 수 있습니다. 사용하려는 아이콘의 이름만 알면 됩니다.

주의해야 할 점은, Next.js는 SSR(Server Side Rendering)을 지원하기 때문에, 아이콘을 렌더링하는 과정에서 문제가 발생할 수 있습니다. 이를 해결하기 위해 **`_app.js`**에서 아이콘의 스타일을 설정해야 합니다.

**`_app.js`** 파일을 아래와 같이 수정하세요:

```
jsxCopy code
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

// Your other imports and code...

```

이제 모든 준비가 끝났습니다! 아이콘을 원하는 컴포넌트에서 사용하실 수 있습니다.

[](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2738%27%20height=%2738%27/%3e)

fa는 무슨뜻이야? free?

ChatGPT

**`fa`**는 FontAwesome의 약자입니다. FontAwesome의 아이콘 이름은 보통 **`fa`**라는 접두사를 가지며, 이는 "Font Awesome"을 나타냅니다. 예를 들어 **`faCoffee`**는 Font Awesome의 Coffee 아이콘이라는 의미이며, **`faGithub`**는 Font Awesome의 Github 아이콘이라는 의미입니다.

**`fa`** 접두사는 FontAwesome 라이브러리에서 아이콘을 참조할 때 일관성을 유지하기 위해 사용됩니다. 그러므로 아이콘 이름 앞에 **`fa`**를 붙여서 FontAwesome 아이콘이라는 것을 명시적으로 알려줍니다. 이는 다른 아이콘 라이브러리와 혼동하지 않도록 도와주며, 코드를 읽는 사람이 이 아이콘이 FontAwesome에서 제공하는 아이콘임을 쉽게 알 수 있게 합니다.