[React, vite] Vite에서 svg파일 초기 설정하기

1. vite-plugin-svgr 다운

pnpm add -D vite-plugin-svgr

 

2. 설정 추가

vite.config.ts

plugins에 svgr() 추가

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    svgr({ 
      svgrOptions: {
        // svgr options
      },
    }),
  ], 
})

 

 

2-1. vite-plugin-svgr ^4.0.0

vite-env.d.ts

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

 

App.tsx

vite-plugin-svgr ^4.0.0 : 파일명 뒤에 ?react query suffix 추가

import SvgIcon from '@/assets/svgs/svgIcon.svg?react';

function App() {
  return (
	<SvgIcon width="25px" height="25px" />
  );
}

 

2-2. vite-plugin-svgr 4.0 이하

vite-env.d.ts

/// <reference types="vite/client" />

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

import { ReactComponent as SvgIcon } from './svgIcon.svg';

 

 

 

 

 

참고자료

https://stackoverflow.com/questions/70309561/unable-to-import-svg-with-vite-as-reactcomponent