React에 fontawesome 적용하기

 

https://fontawesome.com/docs/web/use-with/react/

Set Up with React

 

 

1. npm 설치

먼저 npm 또는 yarn을 사용하여 아이콘이 작동하도록 하는 모든 유틸리티가 포함된 핵심 패키지를 설치해야 한다.

npm install @fortawesome/fontawesome-svg-core

 

다음으로 사용하려는 아이콘을 설치한다. 무료 또는 프로 아이콘을 선택하고, 스타일을 선택할 수 있다.

(무료만 사용하겠다.)

npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons

 

마지막으로 Font Awesome React Component 를 설치한다.

npm install @fortawesome/react-fontawesome@latest

 

이제 폰트어썸을 사용할 모든 준비가 끝났다.

 

이제 코드로 이동하여 작성한다.

 

폰트어썸 아이콘을 사용할 js파일에서 2가지를 import를 해준다.

하나는 폰트어썸아이콘컴포넌트이고 또 하나는 내가 사용할 아이콘인 것 같다.

(나는 플러스 아이콘을 사용해보겠다.)

먼저 fontawesome 사이트에서 사용할 아이콘을 찾아보자.

https://fontawesome.com/

Font Awesome

아이콘의 이름이 fa-plus 이다.

이걸 react에서 사용할 때는 대시를 빼고 카멜케이스로 사용한다.

faPlus 이렇게 써야한다. (나머지도 동일하게 사용)

그럼 코드에 적용해보겠다.

아래와 같이 적용한다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons';

function example() {

    return (
        <div>
            <span><FontAwesomeIcon icon={faPlus} /></span>
        </div>
    );
}

export default example;

이렇게 하면 react 에서 폰트어썸 아이콘을 사용할 수 있다.