[React] svg 파일 불러오기가 안 돼요!

2022.9.27 (화) 작성

1. 에러❗️

리액트에서 svg 파일 자체를 import 시키면 파일을 불러오지 못한다.

2. 상황

• svg 파일 링크를 img 태그의 src로 가져다 쓰는 것과, svg 코드 그대로 복사해 삽입하는 것은 문제가 없었다.
• 하지만 svg 파일을 자체를 import 시키고 싶을 때, 다음과 같이 작성하니 error 가 발생했다.

import CancelIcon from '../images/cancel-icon.svg';
...
const Modal = () => {
  ...
  return (
      <button>
        <CancelIcon />
      </button>
  )
}

 

3. 해결💡

다음과 같이 import 시키면 svg 파일을 리액트 컴포넌트처럼 사용할 수 있다.

import { ReactComponent as CancelIcon } from '../images/cancel-icon.svg';

또한 svg 파일에서 속성값 부분을 current 로 바꿔주면 props 를 통해 값을 변경할 수 있다.

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M13.5161 34 ..." stroke="current" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

<CancelIcon stroke="#aaa" />

 

참고 자료

👉 리액트 svg 관련 블로그