React font-awesome 사용

£€€.T.$·2023년 11월 30일

API React font awesome

React Api

목록 보기

6/7

작업하다보면 icon이 많이 필요한데 ant design의 icon보다는 font-awesome 이 더 다양한 것 같아서 적용해보기로 했다

적용 방법은 크게 두가지가 있는데 첫번째로는 폰트를 하나하나 import 하여 쓰는 react방식과 i 클래스를 호출하는 html 방식이 있다.

두가지 모두 React에 적용해보자!

⚙️ Setting

두가지 방법 모두 다 셋팅 해보자!

React 방식

npm install 하여준다

🔔 FontAwesomeIcon를 컴포넌트로 쓸 수 있게 된다.
npm i @fortawesome/react-fontawesome

🔔 SVG 아이콘을 만들기 위한 핵심 기능이 있는 fontawesome-svg-core 패키지를 설치한다.
npm i @fortawesome/fontawesome-svg-core

🔔무료 아이콘용 npm 패키지는 Regular, Solid, Brands 3개가 있다. 사용할 아이콘이 속한 패키지를 골라 설치한다.
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-brands-svg-icons

HTML 방식

npm install 하여준다

npm install --save-dev @fortawesome/fontawesome-free
혹은
npm i @fortawesome/fontawesome-free

📀 적용

✔️ React 방식

import 방식에는 크게 3가지가 있다.
각각의 장단점과 예제 자세한 설명은 아래 블로그 글을 참조하자

각 방식의 장단점

Global Import :

//초기 모듈에서 사용하는 모든 아이콘을 import 하여 라이브러리에 등록한다 
<FontAwesomeIcon icon="fa-solid fa-plus" />

스타일 SCSS 처럼 등록하고 사용하는 방식이나 공식 문서에서 추천하지 않는 방법이라고 한다 설명은 생략.. (그럼 왜..?)

Dynamic Import :

//추가 플러그인 설치 및 설정 파일을 작성 한다.
// 아이콘 추가가 쉽다
<FontAwesomeIcon icon={solid("plus")} />

아이콘을 추가하기 쉽지만 plugin을 설치하고 셋팅 하는 번거로움이 있다.
공식 문서에서 추천하는 방식이라고 한다. 하지만 상남자는 그런걸..

방법

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

const FontAwesomeTest= () => {
    return (
        <>
           Hello!
           <FontAwesomeIcon 
           icon={icon({name: 'hand-peace', style: 'regular'})} />
           {/* Old way: <FontAwesomeIcon icon={regular("hand-peace")} /> */}
        </>
    );
}
export default FontAwesomeTest

Individual Import :

//추가 설정 없이 아이콘을 사용 할 수 있으나 아이콘 하나하나 import해야한다.
<FontAwesomeIcon icon={faPlus} />

각각의 icon을 svg 에서 import 해야하는 번거로움이 있지만 직관적이고 사용하기 편리하다.

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHandPeace } from '@fortawesome/free-regular-svg-icons'

const FontAwesomeTest = () => {
    return (
        <>
            Hello!
            <FontAwesomeIcon icon={faHandPeace}/>
        </>
    );
}
export default FontAwesomeTest

✔️ HTML 방식

가장 상위 페이지에

import "@fortawesome/fontawesome-free/css/all.min.css";

해준다

import Tab from "./component/tab";
import "@fortawesome/fontawesome-free/css/all.min.css";

function App() {
  return (
    <div>
      <Tab />
    </div>
  );
}
export default App;