[React] React에서 SVG 파일 사용하기

프로젝트를 진행하면서 front를 React를 사용하기로 하였다.
또한 create-react-app을 사용하여 초기설정을 건너뛰도록 하였다.

html 파일에서 <sgv></sgv>태그를 사용하여 sgv 파일을 렌더링하였던 경험이 있어서
React에서도 JSX 문법을 이용하여 <sgv> 태그를 이용하였다.

그러나 이러한 방법은 React의 Component라는 개념과는 거리가 멀었다. 재사용할 수 없었기 때문이다.

재사용하려면 어떻게 해야할까?

1. SVG 파일을 만들어 img태그의 src로 경로를 넣어주기

import React from 'react';
import logo from './logo.png';

console.log(logo); // /logo.84287d09.png

export function Header() {
  return <img src={logo} alt="Logo" />;
}

즉 create-react-app에 의해 설정되어있는 웹팩을 통해서 해당 이미지(png, jpg, ...)는 build폴더로 이동되고 url을 전달해 준다.
이 전달받은 logo(url)을 img 태그의 src 속성에 넣어서 사용할 수 있다.

 

그러나 #1153 에 의해서 10,000 바이트 보다 클경우 여러가지 문제점이 발생하여 SVG에 대한 인라이닝이 비활성화 되었다고 한다. (그냥 SVG는 이러한 방식으로 사용하기 복잡하다고 이해하는것이 편할 듯 하다..)

 

이 임계값을 다르게 설정하여 제어할 수 있다고도 하는데 이 부분은 건들이지 않기로 하였다.(다른 방식이 존재하기 때문)

2. SVG 파일을 Component화 시키기(✔)

React의 구성요소로 직접 SVG를 가져와 컴포넌트처럼 사용하는 방식이다.

import { ReactComponent as Logo } from './logo.svg';

export function Header() {
  return (
    <div>
        <Logo />
    </div>
  )
}

그러나 이 방식은 create-react-app을 사용하였을 경우에만 지원을 하는 것 같다.
그럼 create-react-app을 사용하지 않았을 경우에는 어떤 방식이 있을까..?

Reference

create-react-app