> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/font-awesome-for-react.md).
# 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="" %}