리액트에 폰트어썸(아이콘) 적용하는 방법

클릭하면 상단에 자동으로 올라가는

버튼을 만들고 있었다.

 

그냥 '올라가기'나 '↑' 이렇게 입력하고

font-weight: bold; 로 할까..?? 싶었는데

그러면 너무 맛없는 화면이 될 것 같아서

폰트어썸에서 제공하는 아이콘을 사용하기로 했다.

 

html은 폰트어썸 링크를 호출해 줬는데

React는 어떻게 해주면 될까 하고 검색해보았다.

많이 달랐다.

 

이 블로그 저 블로그 들어가보고

이것도 설치해보고 저것도 설치해보고 했었는데

안 돼서 정리해본다.

얼마나 삽질을 했으면 이 시간에 와카타임이 10시간

정도가 나온다 ㅋㅋㅋㅋㅋㅋ

 

그래도 알아가는게 있어서 행복하다 : )

 

 

 

1. svg 기반 아이콘을 사용할 수 있게 해주는 패키지 설치

터미널에

yarn add @fortawesome/fontawesome-svg-core 입력

 

2. 무료 아이콘 사용을 위한 패키지 설치터미널에

yarn add @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons 입력

 

3. 아이콘을 리액트 컴포넌트 형태로 사용하기 위함

터미널에

yarn add --save @fortawesome/react-fontawesome@latest 입력

(오류가 나면 yarn add fortawesome/react-fontawesome 입력

 

4. 아이콘을 사용할 파일에 import

import {  } from "@fortawesome/react-fontawesome";

* fa-solid를 제외한 제목을 카멜 케이스로 작성

* 제목을 { }에 입력

* { } 안에 작성한 이름이 아이콘 이름

만약,

아이콘 명이 <FontAwesomeIcon icon="fa-solid fa-arrow-up" />

이라면, 

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

import { faArrowUp } from "@fortawesome/free-solid-svg-icons";

첫번째 줄 처럼 폰트 어썸을 import 해주고,

두번째 줄 처럼 카멜 케이스로 작성하고

{ }안에 제목을 넣고

<FontAwesomeIcon icon={faArrowUp} size="xl" />

적용 시켜준다.

 

참고로 사이즈는,

size = "원하는 사이즈" 이렇게 하면되고

그냥 빼도 된다.

지금 나는 xl를 적용한건데

xl를 빼고싶으면 

size="xl"

만 지우면 된다.