[리액트] fontawesome 사용하기

https://fontawesome.com/

저번 svg 다루기에서 이 홈페이지를 추천드렸었죠?
알고보니까 저 모듈이 있어서 svg 파일을 프로젝트에 추가하지 않고도 사용할 수 있더라고요!!
그래서 오늘은 그 방법을 냅다 알려드릴려고 합니다잉

fontawesome 모듈 설치

이건 뭐 그냥 npm install fontawesome 해주시믄 됩니다!

fontawesome 페이지 접속 및 아이콘 고르기

https://fontawesome.com/ 여기 접속해 가지고 아이콘을 고릅니다.

저는 이걸로 냉큼 골랐습니다.
여기서 우리가 기억해야 할건 저 fa-magnifying-glass 입니다.
왜냐면 나중에 사용할거덩여ㅋ

프로젝트에 추가하기

해당 아이콘을 사용하고 싶은 파일에 접속합니다.

우리가 아까 모듈을 설치했으니 사용해줘야 겠져?

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

이렇게 임뽀뜨 해줍니다.

아까 앞전에 제가 이름 기억하라 했죵?
이제 사용할겁미다.

import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons';

그럼 우리는 이제 돋보기 아이콘을 냉큼 데려온겁미다.

<FontAwesomeIcon icon={faMagnifyingGlass}><FontAwesomeIcon/>

이렇게 해주믄 완료입니다. 확인해벌까여?

저는 다른거랑 같이 써서 이렇게 올라갔든데여 암튼 이런식으로 적용됩니다!!!!!

전체코드

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

export default function FontAwesomeTest(){

    return(
      <FontAwesomeIcon icon={faMagnifyingGlass}><FontAwesomeIcon/>
    );
}