React 아이콘 사용 완전 정복: React에서 아이콘 사용하는 방법

React 프로젝트를 진행할 때 아이콘은 사용자 인터페이스의 완성도를 높여주는 중요한 구성 요소다. 버튼, 입력창, 네비게이션 등 다양한 곳에서 기능을 직관적으로 전달하기 위해 아이콘을 자주 활용하게 된다.

이 글에서는 React에서 아이콘을 사용하는 주요 방법 4가지를 소개하며, 특히 react-icons 사이트를 활용해 라이브러리를 설치하지 않고 SVG를 직접 복사해 사용하는 팁도 함께 다룬다.

이번 글은 2부로 이어지며, SVG를 재사용 가능한 컴포넌트로 구성하는 방법은 다음 글에서 자세히 설명할 예정이다.

---

1. SVG 코드 직접 삽입

가장 기본적인 방식으로, SVG 코드를 JSX 내부에 직접 작성하여 사용하는 방법이다.

const CheckIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="green"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M5 13l4 4L19 7" />
  </svg>
);

✔ 장점

• 외부 라이브러리에 의존하지 않는다.
• 크기, 색상 등을 자유롭게 커스터마이징할 수 있다.
• 빌드 용량이 매우 작다.

❌ 단점

• 아이콘이 많아질수록 코드가 중복되고 복잡해진다.
• 컴포넌트 재사용을 고려하지 않으면 유지보수가 어렵다.

---

2. SVG 파일을 import 해서 사용

SVG 파일을 컴포넌트처럼 import하여 사용하는 방식이다. Create React App에서는 기본적으로 지원하며, Vite 등의 환경에서는 설정이 필요할 수 있다.

// CheckIcon.svg
// <svg viewBox="0 0 24 24"><path d="..." /></svg>

import { ReactComponent as CheckIcon } from './CheckIcon.svg';

const Button = () => (
  <button>
    <CheckIcon width="16" height="16" /> 저장
  </button>
);

✔ 장점

• 컴포넌트처럼 재사용할 수 있다.
• props로 크기나 색상 등을 제어할 수 있다.

❌ 단점

• SVG 파일을 별도로 관리해야 한다.
• 빌드 환경에 따라 import 방식이 다를 수 있다.

---

3. 아이콘 라이브러리 사용 (react-icons)

가장 널리 사용되는 방식으로, 다양한 아이콘 세트를 하나의 라이브러리로 통합한 react-icons를 설치하여 사용하는 방법이다.

npm install react-icons

import { FiSearch } from 'react-icons/fi';

const SearchBar = () => (
  <div>
    <FiSearch size={18} color="#555" />
    <input type="text" placeholder="검색" />
  </div>
);

✔ 장점

• Feather, FontAwesome, Material 등 다양한 아이콘을 지원한다.
• props로 크기와 색상 등을 손쉽게 제어할 수 있다.
• 필요한 아이콘만 import하면 트리쉐이킹이 가능하다.

❌ 단점

• 외부 패키지를 설치해야 하므로 번들 크기가 증가할 수 있다.
• 단순한 아이콘 몇 개만 사용할 경우 과할 수 있다.

---

4. react-icons 사이트에서 SVG 복사해서 사용

react-icons 공식 사이트(react-icons.github.io)에서는 다양한 아이콘을 미리 확인할 수 있으며, 원하는 아이콘을 개발자 도구를 통해 SVG 코드만 복사해서 사용하는 방식도 가능하다. 이 방법은 패키지를 설치하지 않고도 다양한 아이콘을 활용할 수 있다는 장점이 있다.

---

복사 방법 (간단 튜토리얼)

1. react-icons.github.io에 접속한다.
2. 원하는 아이콘을 클릭한 뒤, 아이콘 위에서 마우스 오른쪽 클릭 → **“검사(Inspect)”**를 누른다.
3. <svg>...</svg> 코드를 복사한다.
4. JSX에 붙여넣고 HTML 속성을 JSX에 맞게 변환한다.

---

JSX 변환 시 주의할 점

HTML 속성	JSX 속성
stroke-width	strokeWidth
fill-rule	fillRule
class	className

---

예시

const HomeIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M3 9l9-7 9 7" />
    <path d="M9 22V12h6v10" />
  </svg>
);

---

✔ 장점

• 라이브러리를 설치하지 않고도 다양한 아이콘을 사용할 수 있다.
• 매우 가볍고 유연하다.
• 필요한 아이콘만 선택하여 사용할 수 있다.

❌ 단점

• JSX 문법에 맞게 속성을 수동으로 변환해야 한다.
• 동일한 SVG를 여러 곳에서 사용할 경우 중복 코드가 발생할 수 있다.

---

react-icons 사이트에서 원하는 아이콘을 개발자 도구로 복사해 <svg> 형태로 직접 사용하는 방식은, 라이브러리 설치 없이도 아이콘을 유연하게 활용할 수 있는 좋은 방법이다. 특히 단일 아이콘만 필요한 경우나, 프로젝트 용량을 최소화하고 싶을 때 매우 유용하다. JSX 문법 변환만 잘 처리하면 문제없이 사용할 수 있다.

---

다음 글 예고: SVG 아이콘 컴포넌트화

이번 글에서는 SVG 아이콘을 사용하는 주요 방식들을 소개했다.
다음 글에서는 SVG를 재사용 가능한 React 컴포넌트로 만들고,
props로 크기·색상 등을 제어하는 방법,
여러 아이콘을 하나의 폴더에서 관리하는 전략까지 자세히 다룰 예정이다.