[React] icon 사용 (FontAwesome)

1.install

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons 
npm i @fortawesome/free-brands-svg-icons 
npm i @fortawesome/react-fontawesome

• @fortawesome/fontawesome-svg-core : 핵심 패키지
  FontAwesome을 사용하기 위해 핵심적인 기능이 담긴 패키지이다.
  FontAwesome을 사용하기 위해 필수적으로 설치해야 한다.

• @fortawesome/free-solid-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-brands-svg-icons
  (아이콘 묶음 패키지)
  아이콘 패키지는 크게 Solid, Regular, Light, Duotone, Brands 5개의 유/무료 패키지가 존재한다.
  무료 : Solid, Regular, Brands (3개)
  필요한 아이콘이 담긴 패키지만 설치 가능

• @fortawesome/react-fontawesome
  FontAwesome을 컴포넌트 형태로 사용할 수 있도록 해주는 패키지이다.
  필수적으로 설치해야한다.

2.import

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

• 리액트에서 FontAwesome을 import 시켜 컴포넌트 형태로 작성할 수 있도록 해준다.
• Solid 카테고리의 아이콘 중 faSmile 아이콘을 사용하기 위해 import시킨다.

3.사용하기

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSmile } from '@fortawesome/free-solid-svg-icons';
const App = () => {
  return (
   <FontAwesomeIcon icon={faSmile} />
  )
}
export default App;

그 외 FontAwesomeIcon 컴포넌트의 props

• size : 아이콘의 사이즈를 조정 가능하다.

<FontAwesomeIcon icon={faSmile} size="2x" />

size : lg, xs, sm, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

• rotation : 아이콘의 회전이 가능하다.

<FontAwesomeIcon icon={faSmile} rotation={90} />  // 회전

rotation : 0, 90, 180, 270

• flip : 아이콘의 뒤집기가 가능하다.

<FontAwesomeIcon icon={faSmile} flip={horizontal} />  // 수평 뒤집기
<FontAwesomeIcon icon={faSmile} flip={vertical} />    // 수직 뒤집기
<FontAwesomeIcon icon={faSmile} flip={both} />        // 둘다 뒤집기

flip : horizontal, vertical, both

• spin, pulse : 아이콘의 회전 애니메이션이 가능하다.

<FontAwesomeIcon icon={faSmile} spin />  // 부드러운 애니메이션
<FontAwesomeIcon icon={faSmile} pulse />  // 부드럽지 않은 애니메이션

• border : 아이콘의 테두리 생성이 가능하다.

<FontAwesomeIcon icon={faSmile} border />  // 테두리 생성

• pull : 아이콘의 정렬이 가능하다.

<FontAwesomeIcon icon={faSmile} pull="left" />  // 아이콘 좌측 정렬
<FontAwesomeIcon icon={faSmile} pull="right" />  // 아이콘 우측 정렬

pull : left, right