React Icons 알아보기 - 웹 프론트엔드 개발에 사용되는 독보적 라이브러리

프론트단 개발에서 아이콘은 독보적으로 사용되어지는 라이브러리가 존재하는데, React Icons 입니다.

이번 글에서는 React Icons를 가볍게 알아보고 어떤 Icons가 어떤 것인지? 알아보겠습니다.

 

목차

React Icons 란?

React Icons 라이브러리는 다양한 아이콘 팩을 제공하여 React 프로젝트에서 손쉽게 아이콘을 활용할 수 있게 해줍니다. 

 

 

react icons

 

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

 

 

 

React Icons는 단일 패키지를 설치하기만 하면 30개 이상의 아이콘 세트를 통합된 방식으로 사용할 수 있는 오픈소스 프로젝트입니다. 사람들이 다른 라이브러리에서 이 프로젝트로 전환하면서 인기가 상승하고 있습니다. 현재 이 글을 쓸 당시 주당 npm 다운로드 수는 평균 150만 건이 넘고 GitHub 별점은 11,000개 에 가깝습니다 . (출처: https://www.sitepoint.com/react-icons-library/ )

 

 

주요 React Icons 과 어울리는 곳

React Icons 라이브러리는 여러 인기 있는 아이콘 팩을 포함하고 있으며, 각 아이콘 팩은 특정 접두사로 구분됩니다.
아래는 각 아이콘 팩의 접두사를 정리한 것 입니다.

 

react icons -

 

- FontAwesome: `Fa`로 시작 (react-icons/fa)
웹 및 앱 디자인에서 널리 사용되는 다양한 아이콘이 제공됩니다.

react icons - FontAwesome

- Material Icons: `Md`로 시작 (react-icons/md)

Google의 머티리얼 디자인 가이드라인에 맞춘 아이콘입니다.

 

react icons - Material Icons

 

- Bootstrap Icons: `Bs`로 시작 (react-icons/bs)

Bootstrap 프레임워크와 잘 어울리는 아이콘입니다.

react icons - Ant Design

- Feather Icons: `Fi`로 시작 (react-icons/fi)

가벼운 선형 아이콘입니다.

react icons - Feather Icons

 

- Heroicons: `Hi`로 시작 (react-icons/hi)

Tailwind CSS와 함께 사용하기 좋은 아이콘입니다.

 

react icons - Heroicons

 

- Ionicons: `Io`로 시작 (react-icons/io)

모바일 앱에서 많이 사용되며, 모바일 단 디자인에 적합한 아이콘입니다.

 

react icons - Ionicons

- Ant Design Icons: `Ai`로 시작 (react-icons/ai)

Ant Design 시스템과 호환되는 아이콘입니다.

react icons - Ant Design

 

- Simple Icons: `Si`로 시작 (react-icons/si)

다양한 브랜드의 로고 아이콘입니다.

 

설치 및 사용 방법

React Icons를 사용하기 위해서는 먼저 패키지를 설치해야 합니다 설치는 npm 또는 yarn을 통해 간단히 수행할 수 있습니다.

 

npm install react-icons --save

yarn add react-icons

 

 

설치가 완료되었다면, 원하는 아이콘을 import하여 사용할 수 있습니다.

 

 

 

import { FiTrendingUp } from 'react-icons/fi'


'''생략'''

<FiTrendingUp className="text-lg text-primary-400 transition duration-300 group-hover:text-primary-600" />
                  <span className="relative">
                    {post.title}
                    <span className="absolute bottom-0 left-0 h-[2px] w-0 bg-primary-600 transition-all duration-300 group-hover:w-full"></span>
                  </span>

 

참고로 FiTrendingUp 은 이렇게 생겼습니다.

react-icons FiTrendingUp

 

이 라이브러리는 ES6 import를 활용하여 프로젝트에서 필요한 아이콘만 선택적으로 포함할 수 있습니다.

이를 통해 번들 크기를 줄이고 성능을 최적화할 수 있습니다.

 

 

위에 정리한 것 외에도 수많은 아이콘들은 React 프로젝트에서 UI를 더욱 풍부하고 직관적으로 만들어줄 수 있습니다.

각 아이콘 팩의 스타일과 특징을 고려하여 적절한 아이콘을 선택하는 것이 재미있게 개발하는 요소가 될 수도 있을 것 같습니다.

 

 

참고 링크

 

[1] https://kimyang-sun.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%84%EC%9D%B4%EC%BD%98react-icons-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
[2] https://react-icons.github.io/react-icons/
[3] https://velog.io/%40developer_khj/React-icon-library
[4] https://velog.io/%40iamminzzy/React-icon%EC%82%AC%EC%9A%A9-Font-awesome%EA%B3%BC-React-icons
[5] https://zodev.tistory.com/entry/react-icons-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%ED%99%9C%EC%9A%A9-Figma-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8