[ ʀᴇᴀᴄᴛ ] SVG 파일 가져오기( feat.Vite )

프로젝트 진행 중 svg를 가져와 사용하게 되면서 SVG를 컴포넌트로 가져와 사용하는 방법을 찾았다.

SVG File

SVG(Scalable Vector Graphics) 파일의 내용 및 코드는 HTML 코드로 단일 svg 요소로 rapping 된다.

가져오기

img 태그로 가져오기

<img src='assets/example.svg' />

svg 스타일 지정 및 조작이 제한될 수 있다. fill 속성으로 색상만 변경이 가능하다.

React Component 로 가져오기

import { ReactComponent as SVGImage } from 'assets/example.svg';

function Component() {
  return (
    <SVGImage />
  )
}

Vite에서

위의 방법은 CRA 프로젝트에서는 괜찮지만 Vite로 만든 프로젝트에서는 에러가 발생한다.

vite-plugin-svgr 을 설치

$ npm install vite-plugin-svgr
혹은
$ yarn add vite-plugin-svgr

vite.config.js 파일 수정

// vite.config.js 파일에서 import해오고 plugins에 추가한다.
import svgr from 'vite-plugin-svgr';

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

설치 및 수정 후에 ReactComponent로 가져오는 방법으로 가져올 수 있다.

v4.0.0 이후 버전

위 방법대로 해도 v4.0.0 이후에는 다음과 같은 에러가 발생한다.

alias 대신 ?react 접미사를 사용해서 import 해야 한다.

import SVGImage from 'assets/example.svg?react';

여러 방법들을 검색하던 중 스택오버플로우에서 최신 버전에서 사용법이 바뀌었다는 글을 보고 적용해보았다.

언어 : TypeScript (v5.2.2)
라이브러리 : React (v18.2.0)
빌드 도구: Vite (v4.4.5)
컴파일러 : SWC

vite-plugin-svgr (v4.0.0 이상)

👀 Reference

https://velog.io/@yoonth95/SVG-%ED%8C%8C%EC%9D%BC-React-Component%EB%A1%9C-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-Vite-TypeScript
https://velog.io/@uussong/React%EC%97%90%EC%84%9C-SVG-%EB%8B%A4%EB%A3%A8%EA%B8%B0-with-Styled-components
https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/breaking-up-with-svg-in-js-in-2023.md#section2