공부 | react-icons 정리

react-icons의 아이콘 사용법 정리

 

❓상황

쿠팡 클론코딩 중, 로그인 및 회원가입 form 구현할때 아이콘을 구현하기 위해 블로그에 정리하였음.

 

기존에 Font Awesome 사이트의 아이콘을 사용했는데, 다른 사이트의 아이콘 사용하는 경험도 쌓기 위함.

 

📖 React Icons 이란?

React 프로젝트에 주로 사용되는 아이콘들을 포함하고 있음.

 

🐸 설치

// npm
npm install react-icons

// yarn
yarn add react-icons

 

만약, React 프로젝트의 크기가 커질 경우 아래 명령어를 사용할 수 있다.

설치하는데 오래 걸리지만, MeteorJS, Gatsbyjs 등에 적합하다.

// npm
npm install @react-icons/all-files

// yarn 
yarn add @react-icons/all-files

 

🗒️ React Icons

사용 예시 : for standard project

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

 

사용 예시 : for grow project

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

 

🧮 실습

원하는 아이콘 확인하기

나는 쿠팡 <input> 태그 안에 속한 '우편' 아이콘을 사용하고자 한다.

 

검색하기

내가 사용할 아이콘은 '우편' 아이콘인걸 알았으니, React icons 홈페이지 검색창을 이용해 검색한다.

영어로 post라고 입력하여, 내가 원하는 아이콘을 확인한다.

 

import 하는 방법 찾기

내가 사용하고 싶은 아이콘의 이름을 잘 살펴보면, 왼쪽 배너에 표시된 글자와 비슷하거나 축약된 언어라는 것을 알 수 있다.

 

내가 사용하고자하는 아이콘의 이름은 MdOutlineLocalPost 이므로, 왼쪽 배너에 가장 비슷한 글자를 찾을 수 있다.

 

해당 배너를 클릭하면, import하는 방법을 알려준다.

 

vscode에서 import하기

이제 react-icons/md에서 사용할 아이콘 이름을 import로 가져오면 된다.

 

아이콘 이름 복사하고, import 하기

아이콘 이름 복사하는 방법은 간단하다. 바로 사용하고 싶은 아이콘을 클릭하면 자동으로 클립박스에 복사가 된다.

 

복사된 이름을 import하도록 vscode에 붙여넣자.

 

사용하기

맨 처음에서 사용예시와 동일하게 사용하면 된다.

 

정상 출력 확인하기

잘 나왔다.