SVG파일, Component 사용하기!(for Vite + TypeScript)

npm

npm install vite-plugin-svgr --save-dev

devDependencies에 설치!

vite.config.ts 수정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  ...
});

주의사항(vite 버전 별 import 방법)

vite-plugin-svgr(4.0.0 이전 버전)

import { ReactComponent as TestSVG } from "assets/images/test.svg";

return <TestSVG />;

// index.js

export { ReactComponent as TestSVG } from "assets/images/test.svg";

// app.js
import TestSVG from "@/asset";
...
return <TestSVG />;

vite-plugin-svgr(4.0.0 이후 버전)

• 4.0.0 이상 버전에서는 사용 방법이 살짝 다르다.
• SVG 파일을 가져올 때, ?react라는 접미사를 붙여 앨리어싱을 건너뛰어 기본 내보내기를 사용할 수 있다.
• 이렇게 사용할 경우 svg.d.ts 파일을 생성해야 한다.

import TestSVG from "assets/images/test.svg?react";

return <TestSVG />;

svg.d.ts 추가

// svg.d.ts
declare module "*.svg" {
  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default value;
}

vite 버전 별로 사용 방법이 다른 줄 몰랐다...ㅠㅠ
2일간의 고생... 보람찼다🥲

공식 문서나 stackoverflow 가 짱인거 같다ㅋㅋㅋ

index 한 파일로 관리 하려고 했는데 버전이 높아서 아쉽다..ㅠ 아마 방법이 있을 것 같은데
우선 프로젝트 만드는데 집중하고 또 찾아봐야겠다!