[React] Fontawesome, React Icons 사용하기

Fontawesome 사용하기

index.html을 건드리지 않으면서도 가장 간단한 방법

1. 패키지 설치(터미널에서)

yarn add @fortawesome/fontawesome-free
(yarn 미설치시 npm)

2. import(index.js에서)

import '@fortawesome/fontawesome-free/js/all.js';
or
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';

3. 사용(사용할 컴포넌트에서)

<i className="fas fa-address-card"></i>
or 카멜형태로 변형
<FontAwesomeIcon icon={faFacebookF} />

4. 주의사항

npm start시 i태그 자리에 svg태그가 들어가고 svg하위에 path에 실제 글자가 들어감(css등 세부사항 변동가능성)

React Icons

팀프로젝트에서 채택한 방법
React Icons 링크

1. 사용할 컴포넌트에 import

// 폰트명 앞2글자와 form다음의 문자열 뒤2글자 일치시키기
import {
  AiOutlineHeart,
} from 'react-icons/ai';

2. 사용할 위치에 삽입

<AiOutlineHeart />

3. 간단한 사이즈변경은 props에서 가능

<AiOutlineHeart size="30" />

2차프로젝트때 사용할 방법