React/Next.js FontAwesome 설치
FA 리액트/넥스트 설치, SSR 스타일링 문제 해결함.
FontAwesome React/Next.js 설치
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
핵심 라이브러리, 기본 아이콘, React 컴포넌트 한 번에 설치.
기본 아이콘 사용 예시:
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
const IconComponent = () => {
return <FontAwesomeIcon icon={faCoffee} />;
};
faCoffee는 커피 아이콘. FontAwesomeIcon 컴포넌트에 icon prop으로 넘기면 끝.
브랜드 아이콘 필요하면:
npm install @fortawesome/free-brands-svg-icons
브랜드 아이콘 사용 예시:
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
const BrandIconComponent = () => {
return <FontAwesomeIcon icon={faGithub} />;
};
faGithub는 깃헙 아이콘. 다른 아이콘도 이름만 알면 같은 방식.
Next.js SSR 스타일링 문제 해결:
_app.js에서 아이콘 스타일 설정 필요.
import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css"; // CSS import
config.autoAddCss = false; // FA가 CSS 자동 추가 건너뛰게 함. 위에서 import 했으니.
// ... other imports and code
CSS import하고 config.autoAddCss = false 설정하면 끝.
fa는 FontAwesome 약자. faCoffee처럼 fa 붙으면 FA 아이콘이란 뜻. 다른 라이브러리랑 안 헷갈리게.
여기서 배울 것
- FA 기본 패키지 한 번에 설치 가능함.
- 아이콘 종류별(solid, brand) 추가 패키지 필요.
- Next.js SSR 시 `_app.js`에 스타일링 설정 필수.
- `fa` 접두사는 FontAwesome 아이콘이라는 표시.
원본 파일 보기 (.claude/skills/tn-fontawesome-install-react/SKILL.md)
---
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에서 제공하는 아이콘임을 쉽게 알 수 있게 합니다.