React에서 FontAwesome 사용하기
많은 분들이 가장 대표적인 svg 아이콘 사이트로 FontAwesome을 애용하고 있습니다. 물론, 저 또한 굉장히 애용하고 있는데요, 그래서 이번에도 리액트 프로젝트를 제작하게 되면서 FontAwesome을 사용하게 되었습니다. 리액트에서 쉽게 사용하는 방법, 다들 알고 계신가요? 모르고 계셨다면 저와 함께 알아보도록 해요 🙌
1. install
먼저 패키지들을 설치합니다.
→ npm 으로 설치하기
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome→ npm 으로 설치하기
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome설치가 완료되셨나요? 여러분, 성공적으로 완료되었다고 해서 끝이 아닙니다! 각 패키지들이 어떤 역할을 하는지 알고 사용할 수 있어야 해요. 함께 알아볼까요?
1️⃣ 코어 패키지 설치 필수
@fortawesome/fontawesome-svg-core
Font Awesome을 사용하기 위해 필수적으로 설치해야하는 코어 패키지입니다.
2️⃣ 아이콘 패키지 설치 선택
@fortawesome/free-solid-svg-icons@fortawesome/free-regular-svg-icons@fortawesome/free-brands-svg-icons
아이콘 패키지의 종류는 Solid, Regular, Light, Dutone, Brands 5가지 패키지가 존재하지만 저는 무료 패키지만 사용할 것이기 때문에 무료로 제공되는 Solid, Regular, Light만 설치하겠습니다.
✓ 사용할 아이콘의 카테고리에 따라 필요한 패키지만 설치하셔도 됩니다.
3️⃣ 리액트 컴포넌트용 패키지 설치 필수
@fortawesome/react-fontawesome
리액트에서 사용하기 위해 컴포넌트 형태로 사용할 수 있도록 해주는 필수 패키지입니다.
2. Import
설치가 완료되었다면 본격적으로 리액트에서 사용할 수 있도록 Import를 해주어야합니다. 임포트하는 방법 역시 정말 간단해요!
먼저 리액트 컴포넌트용 패키지를 임포트해줍니다.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';그리고 사용할 아이콘의 카테고리에 따라 임포트해 사용해주면 모든 준비는 끝입니다.
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay, faAngleUp } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { faYoutube } from '@fortawesome/free-regular-svg-icons';참고로 아이콘 컴포넌트 이름은 FontAwesome 의 단어 첫글자를 따서 fa + 아이콘 이름 으로 CamelCase 문법으로 작성해주셔야 해요~ 예를 들어, 아이콘의 이름이 angle-up 이라면 컴포넌트 이름은 faAngleUp !
3. 사용해보기 Try it !
FontAwesomeIcon 컴포넌트를 불러옵니다. 그리고 위에서 사용하고자 하는 아이콘을 임포트 했었죠?
그 아이콘 컴포넌트를 icon props 에 전달해주면 끝입니다.
const Component = (props) => {
return <FontAwesomeIcon icon={faHome} />
};여러분, 잘 따라오셨나요? 그럼 FontAwesome 활용으로 멋진 프로젝트 제작하시길 바라며
포스팅 여기서 마치겠습니다. 🥰
