React에서 Font Awesome 을 사용할 경우
이 블로그를 봐주세요!
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
1. FontAwesome 설치
npm 또는 yarn 을 이용하여 아래와 같은 명령어로 설치 가능합니다.
<bash />// npm 일 경우 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome // 추가 아이콘 사용시 npm install --save @fortawesome/free-brands-svg-icons npm install --save @fortawesome/free-regular-svg-icons // yarn 일 경우 yarn add @fortawesome/fontawesome-svg-core --save-dev yarn add @fortawesome/free-solid-svg-icons --save-dev yarn add @fortawesome/react-fontawesome --save-dev // 추가 아이콘 사용시 yarn add @fortawesome/free-brands-svg-icons --save-dev yarn add @fortawesome/free-regular-svg-icons --save-dev
package.json 에서 위와 같은 내용이 설치 된 것을 알 수 있습니다.
2. FontAwesome 을 React에서 사용하기
무료 애플 로고를 사용하기 위해 free 와 Brands 를 누르면 찾을 수 있습니다.
해당 애플 로고는 Html 에서 아래와 같이 사용가능합니다.
<html />
<i class="fab fa-apple"></i>
하지만, React 에서는 아래와 같이 사용해야 합니다.
<javascript />
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faApple } from "@fortawesome/free-brands-svg-icons";
<FontAwesomeIcon icon={faApple} />
제가 이해한 건 FontAwesome Icon 을 가져와서 icon 은 brands 에 있는 faApple 를 사용한다는 의미로 해석했습니다.
왜 fortawesome 이렇게 단어를 조금 변경한지 모르겠지만 사용법을 빨리 이해하고 사용하시길 바랍니다.
반응형
'React' 카테고리의 다른 글
| [React] 내가 이해한 React-Dom 정리하기 (0) | 2021.12.28 |
|---|---|
| [React] 컴포넌트 만들기 및 바벨 사용 (0) | 2020.02.27 |
| [React] 함수형 컴포넌트와 클래스 컴포넌트 (0) | 2019.12.28 |
| [React] NPX 를 이용한 React 설치 (0) | 2019.12.18 |
| [Router] React Router 사용하기 (0) | 2019.09.07 |
