[React | Vite] Vite로 구성된 React + ts 프로젝트에서 svg사용하기

CRA로 프로젝트를 만들면 .svg 파일을 마치 리액트 컴포넌트처럼 import 하여 사용할 수 있다. 

import {ReactComponent as MySvg } from "../assets/mysvg.svg;

const MyComponent = () => {

return <MySvg width="30" height="30" />
}

 

하지만, Vite로 리액트 프로젝트를 구성하고 있다면 추가 세팅이 필요하다. 

세팅 방법은 간단한데, svg관련 라이브러리를 추가로 설치해준다. 

1. vite-plugin-svgr

yarn add vite-plugin-svgr #npm 대신 yarn을 애용하고 있다.

2. vite.config.ts 에 플러그인을 추가해주기

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr'; //임포트하고

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()], //여기에 svgr()을 추가적으로 넣어준다.
});

3. vite.env.d.ts에 코드 추가해주기

타입스크립트를 사용하고 있다면, config를 바꿔도 에러가 발생할 것이다. 이때, vite-env.d.ts에 아래 코드를 추가해주면 된다. (이 내용은 vite-plugin-svgr 의 repo에 가면 방법이 나와 있으니 참고하면 된다.)

vite.env.d.ts

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

 

이제 CRA처럼 svg 파일을 리액트 컴포넌트처럼 사용할 수 있다. 👩

예시 코드 

import React from 'react';
import * as S from './styles';
import { ReactComponent as Search } from '../../assets/search-icon.svg';

const SearchBar = () => {
  return (
    <S.Wrapper>
      <S.SearchInput type="search" placeholder="질환명을 입력해 주세요." />
      <Search width="30" height="30" fill="currentColor" preserveAspectRatio="none" />
    </S.Wrapper>
  );
};

export default SearchBar;

• svg파일을 Search 이름으로 가져와서 컴포넌트처럼 사용

개인적으로 svg를 사용하면서 fill, preserveAspectRatio 속성에 대해서도 좀 보게 됐는데 이 속성들을 조합하여 반응형 svg 를 구현할 수 있는 거 같다. 아직 잘 활용하지 못하지만 알아두면 좋을 정보같아서 기록에 남겨놓는다.  

 

+ 이 외에도 라이브러리를 사용하지 않더라도 vite의 공식문서에 따르면 .svg와 같은 assets를 어떻게 설정하면 vite환경에서도 컴포넌트처럼 사용할 수 있는 지에 대해서 나와있다. 

https://ko.vitejs.dev/guide/features.html