SVG 아이콘을 React 컴포넌트로 만드는 방법

원본 SVG를 JSX에 그대로 붙여넣으면 보통 오류가 납니다. JSX는 HTML이 아니기 때문입니다. 몇 군데만 손보면 SVG는 깔끔하게 재사용 가능한 React 컴포넌트가 됩니다. 수작업과 도구 두 방법을 모두 설명합니다.

1단계: 속성 고치기

JSX는 camelCase 속성명을 요구합니다. SVG의 하이픈 속성을 변환하고 class를 바꾸세요:

• stroke-width → strokeWidth
• stroke-linecap → strokeLinecap
• fill-rule → fillRule, clip-rule → clipRule
• class → className

2단계: 컴포넌트로 감싸기

루트 <svg>에 props를 스프레드하면 호출하는 쪽에서 크기·색상·className을 덮어쓸 수 있습니다:

export function StarIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={2} {...props}>
      <path d="M12 2l3 7 7 .5-5 4.5 1.5 7L12 17l-6 4 1.5-7-5-4.5L9 9z" />
    </svg>
  );
}

stroke="currentColor"를 쓰면 아이콘이 주변 텍스트 색상을 상속하므로 <StarIcon className="text-yellow-500" />만으로 색이 적용됩니다.

3단계(선택): SVGR로 자동화

아이콘이 많다면 도구가 수작업보다 낫습니다. SVGR은 .svg 파일을 컴포넌트로 변환합니다. Vite에서는 vite-plugin-svgr이 ?react import로 노출하고, webpack과 Create React App은 ReactComponent 네임드 export 방식을 씁니다:

// vite-plugin-svgr (v4+): the ?react suffix returns a component
import StarIcon from './star.svg?react';

<StarIcon width={24} className="text-yellow-500" />

// webpack / Create React App use a named export instead:
// import { ReactComponent as StarIcon } from './star.svg';

지름길

Icony에서는 아이콘을 고르고 색·선 두께를 설정한 뒤 JSX 복사를 누르면 바로 붙여넣을 수 있는 React 컴포넌트가 나옵니다 — 속성은 이미 camelCase로 변환되고 props도 스프레드돼 있습니다. 빌드 플러그인 설정 없이 아이콘 한두 개만 필요할 때 유용합니다.