[React] 리액트에서 폰트어썸 아이콘 사용하는 방법

리액트에서 오랜만에 폰트어썸 아이콘을 사용하려고하니 공식문서를 보면서도 조금 헤맸다.

그래서 따로 정리하는 포스팅..!

 

다운로드

npm install --save @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

 

스크립트

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

 

사용 방법

<FontAwesomeIcon icon={faChevronLeft}/>
<FontAwesomeIcon icon={faChevronRight}/>

 

사용하려는 아이콘을 선택해서 React 탭 > 아이콘 이름 부분을 파스칼케이스 방식으로

위와 가팅 icon 속성에 적어주면 해당 아이콘이 삽입되게 된다.

 

전체코드

import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import "./Header.css";

const Header = () => {
    return (
        <header>
            <div className="header-container">
                <div className="header_focus-date">
                    <FontAwesomeIcon icon={faChevronLeft}/>
                    <div className="header_focus-month">월</div>
                    <div className="header_focus-year"></div>
                    <FontAwesomeIcon icon={faChevronRight}/>
                </div>
            </div>
        </header>
    );
};

export default Header;

 

그럼 이제 아래처럼 아이콘이 브라우저에 나타난다!