수 많은 아이콘을 하나의 라이브러리에서: React-icons 사용법

DC

2023년 9월 12일 • 3 min read

React 개발자라면 알다시피, 아이콘은 웹 사이트나 애플리케이션에서 중요한 비주얼 요소입니다. 그럼에도 불구하고, 아이콘을 다루는 일은 때로는 번거롭고 복잡할 수 있습니다. React-icons 라이브러리는 이 문제를 해결하려고 만들어졌습니다. 이 글에서는 React-icons의 기본적인 사용법을 다룰 예정입니다.

1. React-icons 사용 방법

첫번째로, React-icons를 사용하기 위해선 설치부터 시작해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

npm install react-icons

설치가 완료되면, 다음과 같이 아이콘을 임포트하여 사용할 수 있습니다.

import { FaBeer } from 'react-icons/fa';

function App() {
  return <h3><FaBeer /> Cheers!</h3>;
}

이점

다양한 라이브러리 지원: FontAwesome, Bootstrap, Material Design 등 다양한 아이콘 라이브러리를 하나로 사용할 수 있습니다.
간편한 사용법: JSX 문법을 이용하여 아이콘을 HTML 처럼 쉽게 삽입할 수 있습니다.

2. React-icons Size 조절 방법

React-icons는 size prop을 통해 아이콘의 크기를 조절할 수 있습니다. 이 값은 숫자 또는 문자열로 제공될 수 있으며, 단위는 'em', 'px', '%' 등을 사용할 수 있습니다.

import { FaBeer } from 'react-icons/fa';

function App() {
  return <FaBeer size={30} />;
  // 또는
  return <FaBeer size="2em" />;
}

주의점

너무 크거나 작은 값은 아이콘의 가독성을 해칠 수 있으므로 적절한 크기를 선택하는 것이 중요합니다.
단위를 명시할 경우, 해당 단위에 맞춰 아이콘 크기가 조절됩니다.

3. React-icons Style 적용 방법

React-icons는 기본적으로 inline-style을 사용하여 스타일을 적용할 수 있습니다. 이는 아래와 같이 style prop을 사용하여 진행됩니다.

import { FaBeer } from 'react-icons/fa';

function App() {
  return <FaBeer style={{ margin: '20px', padding: '10px' }} />;
}

CSS 클래스 사용

외부 CSS 파일 또는 CSS-in-JS 라이브러리를 사용하여 클래스를 적용하는 것도 가능합니다.

4. React-icons 색상 변경

색상 변경은 color prop을 통해 가능합니다.

import { FaBeer } from 'react-icons/fa';

function App() {
  return <FaBeer color="blue" />;
}

가능한 색상 값

Hex 코드: #ff0000
RGB/RGBA 코드: rgb(255,0,0) / rgba(255,0,0,0.5)
CSS 색상 이름: red, blue, green 등

5. React-icons와 TypeScript 적용

React-icons는 TypeScript를 지원합니다. 타입 정의가 이미 내장되어 있기 때문에 별도의 설치는 필요하지 않습니다.

import { IconType } from 'react-icons';
import { FaBeer } from 'react-icons/fa';

const MyIcon: IconType = FaBeer;

타입 안정성

이러한 방식은 컴파일 타임에서 에러를 잡을 수 있어 타입 안정성이 향상됩니다.

## 마치며

이 글을 통해 React-icons의 다양한 기능과 활용 방법을 알아보았습니다. 이제 여러분도 React 프로젝트에서 더욱 효과적으로 아이콘을 활용할 수 있을 것입니다.