React 리액트 웹디자인 | 리액트 아이콘 react-icon

1. cmd창에서 설치하기

// npm으로 설치시
npm install react-icons --save

// yarn으로 설치시
yarn add react-icons

 

2. 아이콘 고르기

아래 웹사이트에서 첫화면 말고 왼쪽 메뉴창을 차례로 클릭하면서 확인. 고른 아이콘은 이름 복사

https://react-icons.github.io/react-icons/

React Icons

 

3. 적용

 

3.1. 불러오기 import

이름을 복사해서 작성중이던 코드에 다음과 같이 불러온다

// import 기본 형식
import { 고른 아이콘 이름 } from 'react-icons/그 아이콘이 속한 카테고리'

(예시)

- 가령 접은 메뉴에 쓰이는 버거 아이콘(GiHamburgerMenu)을 불러오는 경우 import 코드

- 참고로 아이콘이름의 첫 두 글자를 "소문자로" 쓰면 카테고리가 됨

import { GiHamburgerMenu } from 'react-icons/gi';

 

3.2. 본문 적용

아이콘 이름 그대로 꺽쇠에 넣어 사용하면 됨

예) 이름 : GiHamburgerMenu => 적용된 아이콘: <GiHamburgerMenu />

const App = () => {
  return(
      <div>
        <GiHamburgerMenu />
      </div>
  );
}

 

결과