React svg 파일 import 하는 방법 - Failed to execute 'createElement' 에러 해결법

React는 svg 파일을 사용할 수 있다. 다른 이미지들처럼 <img src=의 값으로도 사용 가능하고, 리액트에서 svg 태그가 사용 가능하기 때문에 svg 파일도 리액트 컴포넌트로 import할 수 있다. 리액트 컴포넌트로 import했을 때는 css를 이용해서 벡터 이미지 스타일을 수정할 수 있는 장점이 있다. react component로의 import가 가능한 이유와 import {default as blahBlah} "./bar.svg의 차이는 다른 포스팅에서 탐구해 보도록 하겠다. (아마 webpack 때문일 것이다) 이 글에서는 svg 파일을 리액트 컴포넌트로 import 하는 방법을 소개한다.

 

import {ReactComponent as MyIcon} from './myIcon.svg';

import ReactComponent로 불러올 수 있다. 이 때 주의할 점은 다른 이미지 파일처럼import { default ...를 사용하는 것이 아니라는 것이다. import { default ... 를 하면 다른 이미지 파일처럼 url 형태의 string으로 import된다. 그렇게 하면 img src의 값으로 사용할 수는 있지만 태그로 둘러썬 리액트 컴포넌트로는 활용할 수 없다.

 

Failed to execute 'createElement' 에러는 svg 파일을 import {default ... 또는 import fooImg from "./foo.svg" 형식으로 import하여 string 타입으로 import하고는 <fooImg /> 처럼 리액트 컴포넌트로 활용하려고 할 때 발생한다. 리액트 컴포넌트로 import할 때는 default import가 아닌 ReactComponent로 import해야 하니 주의하자!