(React 19 + Next js 15 + Panda Css) 2. SVGR 적용

저번에 React 19 + Next js 15 + Panda Css 의 기본적인 세팅을 했습니다. 이제 추가적인 세팅을 하고 서비스에서 사용할 SVG들을 편하게 사용할 수 있는 SVGR이라는 라이브러리를 사용해 보겠습니다.

SVGR이란 ?

공식문서 첫 화면에서 바로 확인할 수 있는대요. Transform SVGs into React components SVG를 React Component로 바꿔주는 라이브러리입니다.

SVGR 설치

pnpm i -D @svgr/cli

이 명령어로 설치를 해줍니다.

SVG 명령어 적용

cli를 사용하기 위한 명령어입니다. 저는 이렇게 구성을 했는데요.

 npx @svgr/cli --typescript --no-index --jsx-runtime automatic --out-dir ./src/common/icons -- ./src/common/icons/assets

옵션을 하나하나 살펴보면

• --typescript : React Component가 Js가 아닌 Ts로 만들어집니다.
• --no-index : 배럴파일 index.ts를 만들지 않습니다.
• --jsx-runtime automatic : jsx 런타임을 지정합니다.
• --out-dir : 결과물을 저장한 폴더입니다.

이제 명령어를 사용하면

import type { SVGProps } from "react";
const SvgHome = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={800}
    height={800}
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      stroke="#000"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M19 9.778V16.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 21 15.88 21 14.2 21H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 18.72 5 17.88 5 16.2V9.778M21 12l-5.433-6.036c-1.236-1.373-1.854-2.06-2.581-2.312a3 3 0 0 0-1.974 0c-.728.253-1.345.94-2.58 2.313L3 12m9 0v4m2-2h-4"
    />
  </svg>
);
export default SvgHome;

이런식으로 만들어진 모습입니다.

소스코드는 여기에 있습니다.