Vite & React 에서 svg 컴포넌트 사용하기

개발환경

• node: ^20.50.1
• react: ^18.2.0
• typescript: ^5.0.2
• vite: ^4.4.0

dependency 설치

npm 이나 yarn 을 이용해 사용할 라이브러리를 설치합니다.

# yarn
yarn add --save-dev @svgr/plugin-jsx
yarn add --save-dev @svgr/plugin-svgo

# npm
npm install --save-dev @svgr/plugin-jsx
npm install --save-dev @svgr/plugin-svgo

tsconfig 수정

tsconfig.json 을 수정하여 vite-plugin-svgr/client 타입을 추가합니다.

"compilerOptions": {
  ...
  "types": ["vitest/globals", "vite-plugin-svgr/client"],
   ...
}

vite config 수정

vite.config.ts 를 수정하여

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

/* svgr */
import svgr from 'vite-plugin-svgr';
import { Config } from '@svgr/core';

/* svgr options*/
const svgrOptions: Config = {
  titleProp: true,
  ref: true,
  memo: true,
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
  svgo: false,
  svgoConfig: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            removeViewBox: false,
          },
        },
      },
    ],
  },
};

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

SVG 컴포넌트 사용하기

다음과 같이 확장자를 .svg?react 로 설정하여 리액트 컴포넌트처럼 사용할 수 있습니다.

import Logo from 'myProject/src/assets/logo.svg?react';

...

const myComponent = () => {
  ...
  return (
    <Logo/ >
    )
}

export default myComponent