# FontAwesome for React
[**Font Awesome**](https://fontawesome.com/)은 공식적으로 React 애플리케이션에서 아이콘을 멋지게 활용 할 수 있는 컴포넌트를 제공합니다.
## 패키지 설치
React에서 FontAwesome 컴포넌트를 사용하기 위해 필요한 각 패키지를 설치합니다. ([솔리드](https://fontawesome.com/icons?d=gallery\&p=2\&s=solid\&m=free) 아이콘 설치)
```bash
npm i @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesome
```
그리고 필요한 경우 [브랜드](https://fontawesome.com/icons?d=gallery\&p=2\&s=brands\&m=free), [레귤러](https://fontawesome.com/icons?d=gallery\&p=2\&s=regular\&m=free) 아이콘 (무료) 아이콘을 추가 설치합니다.
```bash
npm i @fortawesome/free-brands-svg-icons \
@fortawesome/free-regular-svg-icons
```
{% hint style="warning" %}
#### Pro 아이콘
"prop-" 접두사가 붙은 FontAwesome 패키지는 구매 후 사용 가능합니다.
```bash
npm i @fortawesome/pro-solid-svg-icons \
@fortawesome/pro-brands-svg-icons \
@fortawesome/pro-regular-svg-icons \
@fortawesome/pro-duotone-svg-icons
```
{% endhint %}
## 아이콘 사용 방법
프로젝트에 필요한 모든 패키지를 설치했으면 Font Awesome을 React와 함께 사용할 수 있는 2가지 방법이 있습니다.
| **타입** | **장점** | **단점** |
| ------ | ------------------------ | --------------------- |
| 개별 사용 | 최종 번들 최적화 (사용한 아이콘만 번들) | 사용할 때 마다 아이콘을 불러와야 함 |
| 글로벌 사용 | init 모듈에서 아이콘을 한 번만 가져 옴 | 사용하지 않는 아이콘도 번들에 포함 됨 |
### 개별 사용
아이콘을 각 컴포넌트에서 불러와 사용합니다.
```jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
// Coffee 아이콘
const coffeeIcon =
```
### 글로벌 사용
프로젝트에서 2개 이상의 컴포넌트에서 아이콘을 사용할 수 있습니다. 개별 사용 방법은 각 컴포넌트에서 아이콘을 가져와 사용해야 하므로 반복된 작업에 매우 지루할 수 있습니다. 이런 경우 한 번만 추가 등록해 반복된 작업 없이 사용하는 방법을 선택해 활용할 수 있습니다.
글로벌 라이브러리 등록 방법은 코어에서 `library` 모듈을 추출한 다음 아이콘을 등록(`add`) 합니다.
{% tabs %}
{% tab title="App.js" %}
```jsx
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'
// 라이브러리에 등록
library.add(fab, faCheckSquare, faCoffee)
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
**fab**는 모든 브랜드(예: apple, microsoft, google 등) 아이콘을 말하며, 모든 브랜드 아이콘을 라이브러리에 등록합니다. 반면 **faCoffee**, **faCheckSquare**는 개별 솔리드 아이콘을 지칭하며 선택적으로 등록합니다.
{% endhint %}
글로벌 등록 된 아이콘은 개별 사용 때처럼 별도 불러오기 없이 사용할 수 있습니다. FrontAwesomeIcon 컴포넌트를 불러와 `icon` 속성에 등록 된 아이콘 이름을 설정합니다.
{% tabs %}
{% tab title="Beverage.js" %}
```jsx
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// Beverage 컴포넌트
export const Beverage = () => (
따뜻한 가 준비되었어요!
)
```
{% endtab %}
{% endtabs %}
Showcase 컴포넌트는 브랜드 아이콘과 체크 스퀘어 솔리드 아이콘을 사용합니다. 모든 브랜드 아이콘이 라이브러리에 등록되어 있으므로 별도 불러오기 없이 `apple`, `microsoft`, `google` 브랜드 아이콘을 바로 사용할 수 있습니다.
기본 값으로 추론되는 솔리드(`fas`) 타입과 달리, 브랜드(`fab`) 타입은 명시적이어야 합니다. 명시적으로 사용할 `fab` 타입을 설정하려면 `icon` 속성에 다음과 같이 배열을 사용해야 합니다. (예: `['fab', 'samsung']`)
{% tabs %}
{% tab title="Showcase.js" %}
```jsx
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// Showcase 컴포넌트
export const Showcase = () => (
고객사에 가면 항상 따뜻한 커피가 준비 되어 행복합니다. 😍
)
```
{% endtab %}
{% endtabs %}
## 아이콘 구문
앞서 소개한 아이콘 컴포넌트 사용법은 HTML에서의 사용법과는 다릅니다.
```jsx
// [개별 사용] 불러온 faCoffee 모듈 설정
// [글로벌 사용] 솔리드(fas) 타입 암시적 사용
// [글로벌 사용] 솔리드(fas) 타입 명시적 사용
// [글로벌 사용] 레귤러(far) 타입 명시적 설정
```
## 커스텀 클래스 설정
`className` 속성을 사용해 스타일링을 목적으로 하는 커스텀 클래스 이름을 추가할 수 있습니다.
```jsx
```
## 아이콘 검색
[무료 아이콘](https://fontawesome.com/icons?d=gallery\&p=2\&m=free)을 키워드로 검색해 찾을 수 있습니다.
## 아이콘 크기
아이콘 [Size](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons) 설정 방법은 다음과 같습니다.
```jsx
```
## 고정 너비 아이콘
아이콘 [Fixed Width](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons) 설정 방법은 다음과 같습니다.
```jsx
```
## **반전 아이콘**
아이콘 Inverse 설정 방법은 다음과 같습니다.
```jsx
```
## 리스트 아이콘
[리스트 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list)을 설정하는 방법은 다음과 같습니다.
```jsx
```
## 회전 아이콘
[회전 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons)을 설정하는 방법은 다음과 같습니다.
```jsx
```
## **플립 아이콘**
아이콘을 수평(**horizontal**), 수직(**vertical**) 또는 양 방향(**both**)으로 설정하는 방법은 다음과 같습니다.
```jsx
```
## 애니메이션 아이콘
[애니메이션 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons) 설정 방법은 다음과 같습니다.
```jsx
```
## 보더 아이콘
[보더 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons) 설정 방법은 다음과 같습니다.
```jsx
```
## 풀드 아이콘
[풀드(pulled) 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons) 설정 방법은 다음과 같습니다.
```jsx
```
## 트랜스폼 아이콘
[트랜스폼 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms) 설정 방법은 다음과 같습니다.
```jsx
```
## 마스킹 아이콘
[마스킹 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/masking) 설정 방법은 다음과 같습니다.
```jsx
```
## 레이어 아이콘
[레이어 아이콘](https://fontawesome.com/how-to-use/on-the-web/styling/layering) 설정 방법은 다음과 같습니다.
```jsx
```
## SVG 스프라이트 아이콘
[SVG 스프라이트 아이콘](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols) 설정 방법은 다음과 같습니다.
```jsx
```
## 참고
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://yamoo9.gitbook.io/learning-react-app/tip-and-references/font-awesome-for-react.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.