[Init] SVGR 설정

[qowjdals23]

✏️ Summary

• close [Init] SVGR 설정 #15

• Vite(React + TypeScript)에서 SVG를 React 컴포넌트로 import할 수 있도록 SVGR 설정을 추가했습니다.

• SVG 최적화(SVGO)를 적용하되, 아이콘/일러스트가 CSS로 리사이즈될 때 깨질 수 있는 케이스를 방지하기 위해 viewBox는 보존하도록 구성했습니다.

📑 Tasks

1) SVGR 설정 (SVG → React Component 변환)

SVGR은 SVG 파일을 React 컴포넌트로 변환해서 JSX로 렌더링하기 위한 설정입니다.

• vite-plugin-svgr 설치 (Vite 플러그인)
• vite.config.ts에 svgr() 등록
• ?react 쿼리로 import된 SVG만 컴포넌트 변환되도록 사용 방식 고정

.svg를 URL로 import해서 <img src="...">로 쓰는 케이스랑, 컴포넌트로 렌더링하는 케이스를 프로젝트에서 같이 쓰게 될 가능성이 있어서 컴포넌트로 쓰고 싶은 SVG만 명시적으로 ?react를 붙이는 방식으로 정리했습니다.

• TypeScript 타입 지원을 위해 vite-env.d.ts에 타입 reference 추가

수동 declare module "*.svg?react" 방식 대신, 공식 제공 타입 레퍼런스 방식으로 통일했습니다 !
vite/client는 기존 Vite 템플릿 타입을 유지합니다

/// <reference types="vite-plugin-svgr/client" />
/// <reference types="vite/client" />

---

2) SVGO 설정 (SVG 최적화)

SVG 파일의 불필요한 속성/메타데이터를 정리해서 더 가볍게 만들기 위한 최적화 단계입니다.

• @svgr/plugin-svgo 설치
• SVGR 변환 과정에서 SVGO가 동작하도록 svgrOptions.plugins에 SVGO 플러그인 추가
• 최적화는 유지하되, viewBox는 제거되지 않도록 설정

---

3) viewBox 보존 처리

• viewBox는 SVG 내부 좌표계/뷰포트 범위를 정의하는 값입니다.
• viewBox가 존재하면 SVG가 컨테이너 크기에 맞춰 비율 유지하면서 확대/축소(스케일링) 되기 쉽습니다.

removeViewBox가 켜져 있을 때 발생하는 문제 !

SVGO의 removeViewBox는 “width/height와 동일한 viewBox를 제거”하는 최적화를 할 수 있는데, viewBox가 없어지면 SVG가 부모 컨테이너에 맞춰 스케일링이 어려워져 아이콘이 컨테이너를 못 채우거나 CSS로 크기를 줄였을 때 클리핑(잘림) 이 발생할 수 있습니다.

그래서 이번 PR에서는 최적화는 켜되, viewBox는 유지하도록 preset-default를 사용하면서 removeViewBox만 override로 비활성화했습니다 !

// vite.config.ts 

svgr({
  svgrOptions: {
    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
    svgoConfig: {
      plugins: [
        {
          name: "preset-default",
          params: {
            overrides: {
              removeViewBox: false, //  viewBox 보존 !
            },
          },
        },
      ],
    },
  },
});

---

4) 사용 예시 추가 (동작 확인용 !)

절대경로 예시(케로로 이미지) 옆에 SVGR 아이콘 import 예시를 같이 추가했습니다 !!

import KERORO from "@images/comfit_web_status.jpg";
import Heart from "@icons/heart.svg?react";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <img src={KERORO} alt="Keroro" />
      <Heart role="img" aria-label="좋아요" />
    </div>
  );
};
export { HomePage };

사용 방법 정리

• SVG를 컴포넌트로 사용할 때: import Icon from "heart.svg?react"
• 이미지/에셋으로 사용할 때: 기존처럼 정적 에셋 URL import 유지 (jpg/png/svg)

👀 To Reviewer

• 🥲 놓친 부분이 있거나 수정이 필요한 부분 모두 편하게 말씀해주시면 반영하겠습니다!!!!!!!!! 🔥🔥🔥

🔔 ETC

[hummingbbird]

svgo 플러그인으로 최적화하는 방식은 처음 알았는데 정말 신기하네요 .. viewBox 옵션까지 꼼꼼하게 챙겨서 추후에 발생할 수 있는 문제를 사전에 처리해준 점도 너무 좋습니다!

또한 공식 문서에서 권장하는 방식으로 타입 지원을 처리한 것도 너무 너무 좋습니다! 문제 없는 거 같아 어푸할게용 수고하셨어요 ~~
(앗차차찿차 충돌해결 꼭 해주세요 !!!)

[hummingbbird]

aria-label로 접근성 챙긴 것 완전 good

[u-zzn]

꺅 작업하시느라 수고 많으셨습니다 🖤
채영님이 리뷰 달아주신 것처럼 타입 선언을 수동 declare module 대신 공식 타입 reference 방식으로 통일한 점 좋았어요 :)

저도 전에 SVGR 초기 세팅을 맡아본 적이 있는데, SVGO 최적화는 유지하면서 viewBox 제거로 인한 UI 깨짐 가능성을 막을 수 있는 설정은
몰랐는데 많이 배워갑니다 ~!!

HomePage에 사용 예시 추가해서 직접 테스트해본 점도 굳굳입니당 👍 수고 많으셨어요 바로 어푸할게요 ☺️

[u-zzn]

?react 쿼리로 SVG 사용 방식을 명확히 나눠둔 점이 좋았습니다 ☺️👍

[odukong]

SVGR에 필요한 설정들 잘 적용된 것 같습니다!
저도 SVGO로 최적화하면서, 리사이징 이슈 없도록 viewBox 옵션을 적용할 수 있는 점은 몰랐는데 새롭게 배워가요!!! 짱짱 수고하셨어요💞🙌🏻 어푸어푸~~

[github-actions]

🚀 빌드 결과

❌ 린트 검사 실패
❌ 빌드 실패

로그 확인하기

Actions 탭에서 자세히 보기

[qowjdals23]

어라