!원문 캡처 · github.com

vite-svgee-plugin 저장소는 Vite에서 SVG 파일을 React 컴포넌트로 가져오는 플러그인이다. 제작자는 기본 설정에서 SVGR보다 변환이 약 5배 빠르고, 양쪽 모두 SVGO를 끈 조건에서는 약 16배 빠르다고 밝혔다.

SVG 파일을 ?react를 붙여 가져오면 컴포넌트로 사용할 수 있다.

import ArrowLeft from "./icons/arrow-left.svg?react";

<ArrowLeft className="icon" onClick={handleClick} />;

설정에는 Vite 7 이상이 필요하다. vite.config.ts에 플러그인을 등록하고, TypeScript에서는 vite-svgee-plugin/client 타입 선언을 참조하거나 tsconfig.json의 compilerOptions.types에 추가한다. 변환 결과는 SVGProps<SVGSVGElement>를 받는 함수로 타입 지정된다.

옵션으로 SVGO 설정 또는 비활성화, React.forwardRef와 React.memo 적용, 루트 SVG의 width와 height 제거를 선택할 수 있다. SVGO를 사용하려면 별도로 설치해야 한다.

구현과 성능 비교

플러그인은 *.svg?react 형식의 모듈을 찾으면 SVG 파일을 읽고, 문자 단위 파서로 XML을 요소 트리로 변환한 뒤 createElement 호출로 React 컴포넌트 모듈을 생성한다. SVG의 기존 속성은 사용 시 전달한 props와 병합된다. 파서는 요소·속성·텍스트·CDATA·주석·처리 명령·DOCTYPE과 XML 엔티티를 처리하며, 태그 불일치나 중복 속성 등 형식 오류도 검사한다.

벤치마크는 같은 SVG 파일 4개를 각 플러그인에서 1,000회 변환하고, 실행 시간의 중앙값을 사용했다. 기본 설정에서 대표 아이콘 하나를 변환하는 시간은 svgee 약 0.071ms, SVGR 약 0.38ms였다. 다만 파일이 복잡해질수록 차이는 줄었다. SVGO를 사용한 stress-heavy.svg에서는 각각 6.209ms와 10.078ms로 약 1.6배 차이가 났다.

직접 측정하려면 저장소에서 npm run bench를 실행하면 된다. 플러그인은 MIT 라이선스로 배포된다.