Vite - React & TS에서 svg파일 import 사용하기

⭐️ Vite에서 SVG파일을 컴포넌트로 받아서 사용하기

🚫 오류 사항

vite 프로젝트에서 기존 방식으로 import하여 svg파일을 사용하면 아래와 같은 오류가 발생한다.

'".svg?react"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다.
대신 '".svg?react"에서 ReactComponent 가져오기'를 사용하시겠습니까?ts(2614)

✅ vite-plugin-svgr 적용하기

• vite-plugin-svgr설치
  vite에서는 바로 svg가 적용이 안되고 vite-plugin-svgr 활용해야 한다고 한다.

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

• vite.config.ts

  export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: {
        // svgr options
      },
    }),
  ],
  resolve: {
    alias: [
      { find: '@assets', replacement: '/src/assets' },
      { find: '@', replacement: '/src' },
    ],
  },
  });

  plugins 배열에 svgr()을 추가한다(옵션 커스텀이 필요하다면 추가)

• src/vite-env.d.ts

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

• src/SvgTest.tsx

  import SearchIconSVG from '@assets/images/svg/searchIcon.svg?react';
  export const SearchIcon = () => <SearchIconSVG />;

🔹 주의사항

import부분에서 from 끝부분에 "경로?react"를 붙여주고 구조분해할당으로 별칭을 주는게 아
사용할 컴포넌트명을 지정하여 사용하면 된다.