[지은] SVG 파일을 react component처럼 사용하기 (feat. svgr) - boostcampwm2023/web04-ALGOCEAN GitHub Wiki

개요

왜 SVG 파일을 컴포넌트처럼 사용하고자 하는가?

react에서 SVG 파일은 크게 2가지 방법으로 사용할 수 있다.

• img 태그의 src에 svg 파일을 전달하는 방법
• 특정 라이브러리를 활용하여 컴포넌트처럼 사용하는 방법

첫번째 방법이 간단하다는 장점이 있지만 세부적인 설정은 할 수 없다는 단점이 있다.

따라서 높이, 색상 등을 상대적으로 세세하게 컨트롤 할 수 있는 두번째 방법을 사용하기로 결정했다.

적용

1. svgr 라이브러리 채택

SVGR - Transforms SVG into React Components. - SVGR

svgr는 react에서 svg 파일을 컴포넌트처럼 사용할 수 있도록 하게 해주는 라이브러리이다.

vite에서 svgr 라이브러리를 사용하기 위해선 vite-plugin-svgr 플러그인을 설치해주면 된다. 다음과 같은 명령어를 통해 vite-plugin-svgr를 설치하도록 하자.

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

2. vite.config.js

vite에게 우리가 vite-plugin-svgr 플러그인을 사용할 것이라는 것을 말해줘야 한다. vite.config.js에 다음과 같이 작성하여 플로그인을 추가해주자.

// vite.config.js
import svgr form 'vite-plugin-svgr'; // 플러그인 import

export default defineConfig({
	...,
	plugins: [..., svgr()] // ✅ svgr() 추가
});
	

3. 타입스크립트 관련 추가 설정

타입스크립트를 사용한다면 다음과 같은 설정을 추가해 주어야 한다. 잊지 말고 꼭 추가하여 타입 에러가 발생하지 않도록 하자.

vite-env.d.ts

// vite-env.d.ts
...
/// <reference types='vite-plugin-svgr/client' /> // 이 태그를 추가해준다.

svg.d.ts

svg 파일에 대한 타입을 선언. 프로젝트의 루트 디렉토리에 위치하면 된다. (이름은 자유롭게 변경 가능하다)

// svg.d.ts 
declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

tsconfig.json

타입스크립트에게 svg 관련 타입 선언을 사용해줄 것을 말해주자

// tsconfig.json
{
	"compilerOptions": {
		...
	},
	"include": [..., **"svg.d.ts"**]
}

사용 예시

위와 같은 설정을 모두 마쳤다면 다음과 같이 SVG 파일을 컴포넌트처럼 사용할 수 있다.

svg를 import해 줄 땐 꼭 뒤에 ?react 접미사를 추가해주도록 하자. 그래야 올바르게 인식할 수 있다.

import SVGIcon from '../svg-icon.svg**?react**';

export default MyComponent() {
	return (
		<SvgIcon width='24px' cursor='pointer' fill='#ffffff'/>
	)
};