[React] react-icons 사용후기

react-scroll과 마찬가지로 포트폴리오 성능개선 작업을 하며 react-icons라는 라이브러리를 사용해 보았다.

기존의 fontawesome을 이용한 아이콘들을 react-icons로 교체하는 간단한 작업이었다.

사용법 또한 매우 간단하다.

---

react-icons를 이용한 상단바 햄버거 아이콘

---

기본적인 사용법은 타 라이브러리들과 마찬가지로 공식 사이트에 매우 친절하게 나와있다.

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

React Icons

npm install react-icons --save

프로젝트에 react-icons를 설치하고,

import { FaAlignJustify } from "react-icons/fa";

사용하고자 하는 아이콘을 컴포넌트에 불러온다.

<div>
	<FaAlignJustify />
</div>

마지막으로 태그처럼 사용하면 끝이다.

export const NavToggleBtn = styled(FaAlignJustify)`
  display: none;
  color: var(--main-fonts-color);
  font-size: var(--font-size-small);
  position: absolute;
  top: 24px;
  right: 24px;
  @media screen and (max-width: 413px) {
    display: block;
  }
`;

styled-components와 함께 사용하는 것도 가능하다!

---

https://github.com/mediumryan/portfolio/

GitHub - mediumryan/portfolio: My portfolio for getting a job.