SVG를 React 컴포넌트로 변환하는 방법: 완전 가이드

Source: Dev.to

SVG를 React 컴포넌트로 사용할 때의 장점

• 동적 props – fill, stroke, width, height 등을 컴포넌트 props로 변경할 수 있습니다.
• 트리 쉐이킹 – 실제로 사용하는 아이콘만 번들에 포함합니다.
• TypeScript 지원 – React.SVGProps를 사용한 완전한 타입 안전성을 제공합니다.
• 애니메이션 – CSS 또는 Framer Motion 같은 라이브러리로 애니메이션을 적용합니다.

속성 변환

// React JSX

xmlns 제거

JSX에서는 xmlns 속성이 필요하지 않습니다.

// Remove this

// Keep just

예시 React 컴포넌트

import React from 'react';

const MyIcon: React.FC> = (props) => (
  
  
);

export default MyIcon;

변환 도구

• SVG to React Converter – SVG 마크업을 즉시 React 컴포넌트로 변환합니다:
  • 속성을 자동으로 camelCase 변환
  • className 교체
  • TypeScript SVGProps 타입 지정
  • 커스터마이징을 위한 props 전파
• SVG to JSX Converter – SVG를 컴포넌트로 감싸지 않고 JSX로 변환합니다.
• HTML to React Converter – 전체 HTML을 React 컴포넌트로 변환합니다.
• HTML to JSX Converter – HTML을 JSX 문법으로 변환합니다.