본문 바로가기

Frontend Dev/React

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 to transform SVGs into React components - pd4d10/vite-plugin-svgr

github.com

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을 사용했었는데, 문제의 해결을 위해 구글링만 했었던 기억이 난다. 생각해보니 가장 먼저 찾아봐야 하는건 공식문서 격인 “그 도구의 사용설명서”였는데, 구글링을 해 찾은 블로그의 내용들만 보고 적용을 하는 걸로 당장의 해결에만 급급했었다.


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