React에서 SVG 컴포넌트로 불러오기 (Vite + TS 환경에서 SVG 파일 가져오기 feat. vite-plugin-svgr)

✏️ 사이드 프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다.

 

팀 프로젝트와 개인 프로젝트를 하며 SVG를 사용할 일이 있었는데,

SVG 파일의 장점을 살려 활용하기 위해 컴포넌트로 불러와 사용하고자 하였다.

그 과정을 정리해보았다.

 

🔖 목차

1. SVG (Scalable Vector Graphics) 가 무엇인가요?

2. SVG 이미지를 사용하는 방법 2가지

  ① img 태그의 src에 직접 넣어 사용하기
  ② SVG 파일을 컴포넌트로 불러와 사용하기
  ⭐ Vite + TypeScript 환경에서 SVG를 컴포넌트로 불러오는 방법

3. React에서 컴포넌트로 불러온 SVG 활용하기

 

 

1. SVG (Scalable Vector Graphics) 가 무엇인가요?

SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

SVG는 웹 친화적인 벡터 파일 포맷으로 크기를 조절해도 품질이 유지되며, (보통은) 용량이 적어 출력이 빠르고, 수정과 애니메이션이 가능하기 때문에 웹 그래픽에 적합하다.

 

 

2. SVG 이미지를 사용하는 방법 2가지

① img 태그의 src에 직접 넣어 사용하기

SVG 파일은 img 태그의 src 속성에 직접 삽입해 사용할 수 있다. 이렇게 사용하면 정적 이미지로 SVG 파일 자체의 속성을 바꿀 수는 없다.

 

② SVG 파일을 컴포넌트로 불러와 사용하기

React에서 SVG의 장점을 부각시키기 위해서는 React 컴포넌트로 불러와 사용할 수 있다.

SVG 파일을 컴포넌트로 불러오게 되면 하나의 SVG 파일을 각각의 컴포넌트마다 원하는 색상, 크기 등을 지정해줄 수 있어 재사용성이 높아진다.

하지만 당연히 이렇게 막무가내로 불러오면 에러만 표시할 뿐…

 

⭐ Vite + TypeScript 환경에서 SVG를 컴포넌트로 불러오는 방법

Vite로 프로젝트를 생성했다면, vite-plugin-svgr을 사용하여 SVG를 컴포넌트로 불러올 수 있다.

GitHub - pd4d10/vite-plugin-svgr: Vite plugin to transform SVGs into React components

vite-plugin-svgr은 Vite 플러그인으로, SVG를 React 컴포넌트로 변환해주는 도구이다.

 

vite-plugin-svgr 사용법

(사용법은 위 Repo의 ReadMe의 내용과 일치합니다.)

 

1. Installation (설치)

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

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

 

2. vite.config.ts 파일에 아래와 같이 코드를 추가한다.

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

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

 

3. React 컴포넌트에서 import를 한다.

import reactLogo from './assets/react.svg'
import ReactLogo from './assets/react.svg?react';

function App() {
  return (
    <>
      <img src={reactLogo} alt="React logo" />
      <ReactLogo />
    </>
  )
}

export default App

 

4. TypeScript를 사용한다면 아래 코드를 추가해준다.

TypeScript를 사용한다면 위와 같은 에러가 발생한다.

 

vite-env.d.ts 파일에 /// <reference types="vite-plugin-svgr/client" /> 추가

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

 

이렇게 하면 에러가 사라지고, SVG 파일을 컴포넌트로 불러와 사용할 수 있다.

 

---

 

➕ 참고) vite-plugin-svgr 버전 변경 건 (v4.0.0 이전과 이후)

작년에 팀 프로젝트를 진행할 때는 vite-plugin-svgr의 사용법이 달랐던 것으로 기억한다. 찾아보니 버전이 올라가면서 (현재 버전 v4.2.0) 적용 방법이 약간 달라졌다는 것을 알게되었다. (혹시 헤매고 계신 분 있다면 참고하세요!)

// v4.0.0 이전
import { ReactComponent as Logo } from "./logo.svg";

// 사용
<Logo />

// v4.0.0 이후
import Logo from "./logo.svg?react";

// 사용
<Logo />

 

https://github.com/pd4d10/vite-plugin-svgr/releases/tag/v4.0.0

 

v4.0.0이 23년 9월 20일 업데이트 되었다. 작년 팀플이 끝나고 새롭게 프로젝트를 진행하려는 사이에 바뀌어서 헷갈렸던 것이다.

 

---

 

 

3. React에서 컴포넌트로 불러온 SVG 활용하기

SVG 파일을 컴포넌트로 불러오게 되면 하나의 SVG 파일을 각각의 컴포넌트마다 다양한 크기와 색상을 가지도록 표현할 수 있어 재사용성이 높아진다.

1. svg 파일에 current 속성 지정

 

예를 들면, 위 svg 코드에서 width와 height를 사용하려는 컴포넌트마다 다르게 지정하고 싶다면 current라는 속성을 넣어주면 된다.

2. 컴포넌트에서 해당 속성 지정

 

그리고 컴포넌트로 불러올 때 width와 height 속성을 지정해줄 수 있다.

 

---

💬

이전 팀 프로젝트에서 SVG 이미지를 컴포넌트로 불러오는 과정에서 여러차례 에러가 발생한 적이 있었다. 그 때에도 vite-plugin-svgr을 사용했었는데, 문제의 해결을 위해 구글링만 했었던 기억이 난다. 생각해보니 가장 먼저 찾아봐야 하는건 공식문서 격인 “그 도구의 사용설명서”였는데, 구글링을 해 찾은 블로그의 내용들만 보고 적용을 하는 걸로 당장의 해결에만 급급했었다.

요즘에는 공식문서나 해당 소스의 출처를 찾아보려는 습관을 가지게 된 것 같고, 이런 습관이 좀 더 근본적인 문제의 해결과 정확한 사용법에 도움이 되는 것 같다.