[REACT] React JS에서 아이콘 추가하기

React Icons

위 사이트에서 import 부분에 나와있는 코드를 복사, 괄호 안에 있는 IconName을 아래의 아이콘 목록에서 붙여넣기 한다.

 

 

import 

import {iconName} from "react-icons/hi"

 

예시

import {HiOutlineUser} from "react-icons/hi";
import {HiOutlineKey} from "react-icons/hi";
import {HiLockClosed} from "react-icons/hi";
import {HiOutlineStar} from "react-icons/hi";
import {HiMail} from "react-icons/hi";

 

 

<div className="data-box">
    <div className="small-box">
       <HiOutlineUser size = "40" color = "#898989" align-items ="center" flex-direction = "row" justify-content=  "center"/>
    </div>
</div>

HIOUTLINEUSER 아이콘 사용 예시

(프로젝트 전체 코드의 일부 입니다.)

 

 

 npm install react-icons --save

모듈을 찾을 수 없거나, 아이콘을 Import 해오는 과정에서 오류가 생긴다면

모듈을 설치해보는것 추천! 설치가 안돼있을 수도 있다.

그리고 프로젝트 클론, 저장소 이동시에도 잘 알아 두었다가 항상 다시 설치 해주어야함