📌React-Icons

• 다양한 아이콘을 React 애플리케이션에서 쉽게 사용할 수 있도록 도와주는 라이브러리

설치

yarn add react-icons

npm install react-icons

사용

1. 공식문서에서 원하는 아이콘 검색
   

2. 원하는 아이콘을 import하여 사용

프로젝트에서 활용한 아이콘 예시

return user ? (
    <Div>
      {user.avatar ? <Img src={user.avatar} /> : <CgProfile />}
      <Button onClick={handleLogout}>로그아웃</Button>
    </Div>
  ) : (
    <div></div>
  );

3. 별도의 스타일링도 가능(스타일드 컴포넌트 활용)

return user ? (
    <Div>
      {user.avatar ? <Img src={user.avatar} /> : <Profile />}
      <Button onClick={handleLogout}>로그아웃</Button>
    </Div>
  ) : (
    <div></div>
  );

.
.
.
const Profile = styled(CgProfile)`
  border: none;
  border-radius: 20px;
  width: 35px;
  height: 35px;

  background-size: cover;
  margin: 0 10px;

  cursor: pointer;
`;