# 웹에서 아이콘 사용하기

Doozuu·2023년 1월 16일
0

CSS

목록 보기
3/8

Font Awesome

웹에서 아이콘이 필요할 때 사용하는 라이브러리
장점 : svg 기반 아이콘 지원


패키지 설치

SVG 기반 아이콘 활성화

 npm i @fortawesome/fontawesome-svg-core

무료 제공 아이콘 패키지 설치

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

React 컴포넌트 형태로 사용할 수 있도록 해주는 기능

npm i @fortawesome/react-fontawesome

사용 방법

패키지 설치를 마치고 나면, 아이콘을 사용할 파일에 FontAwesome을 import 해준다.

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

필요한 아이콘들을 추가로 import 한다.
ex) 구글, 깃허브 아이콘

import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";

<FontAwesomeIcon /> 의 icon 속성에 값을 넣어준다.

<FontAwesomeIcon icon={faGoogle} />



참고 : https://www.daleseo.com/react-font-awesome/

profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글