[React] 리액트에서 SVG 파일 import 해서 사용하기!

SVG 사용하기

리액트에서 SVG 파일을 사용하는 방법은 여러가지가 존재합니다.
가장 익숙한 방법으로는 img 태그 src 속성에 SVG 파일을 추가하는 방법이 있지만, 이 경우에는 SVG 파일의 장점을 십분 발휘하지 못합니다.
img 태그로 불러오면 색깔이나 크기가 조금 다른 아이콘을 사용하기 위해서는 또 새로운 SVG 파일을 갖고 있어야 하기 때문입니다.
그렇다면 어떤 방법을 이용하여 SVG 파일을 불러오는 것을 추천하는 지는 아래에서 설명 드리겠습니다.

SVG를 React 컴포넌트로 import하기

이 방법은 Create-React-App에서 가능한 방법이며, 위에 이미지처럼 img 태그를 사용하기 보다는 SVG 파일 자체를 컴포넌트로 사용하길 추천드립니다.
이 방법을 사용하면, 하나의 SVG 파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있습니다.

import {ReactComponents as Cool } from 'assets/bx-cool.svg'

<Cool />

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
    <path ... />
</svg>

// width, height, color 등을 current로 변경 후 props 전달하면 변경 가능
<svg xmlns="http://www.w3.org/2000/svg" width="current" height="current" viewBox="0 0 24 24"> 
    <path ... />
</svg>

<Cool width="48" height="48" />

Vite 환경에서 SVG를 React 컴포넌트로 import하기

Vite로 작업을 할 때 위의 방식우은 에러가 생깁니다.
그렇기 때문에 svgr이라는 플러그인을 설치를 해주어야합니다.

$ npm i vite-plugin-svgr
또는
$ yarn add vite-plugin-svgr

vite-plugin-svgr를 설치 후 vite.config.js 파일에 import 후 plugins에 추가를 해주어야합니다.
그렇게 하면 에러가 사라지고 사용이 가능합니다.

import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [svgr(), react()],
})

참고

[React] React에서 SVG 활용하기
[react] react에서 svg 불러오는 방법
[vite] vite환경에서 svgr 플러그인 환경 구성 + svg import 트러블 슈팅...