TIL 24.11.29 React svg component 불러오기

React 에서 svg를 불러오는 방식에 대해서는 여러가지가 있다.

그동안 내가 사용했던 방식은 이미지 형식으로 src 에 삽입해서 작성하는 것으로, svg 형태로 코드를 작성한 후,

다음과 같이 img src={해당 svg파일} 을 불러와서 사용했다.

 

1. svg 파일을 img 형태로 src에 추가하기

 

checkImg.svg

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="2" fill="#6CC18F"/>
<path d="M16 5L7.75 14L4 9.90909" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

 

 

   <img style={checkboxStyle} src={checkImg} alt={"checkbox"} />

 

그러나 새롭게 알게 된 방식이 있어서 작성해보려고 한다.

 

2. 컴포넌트 형태로 import 하여 사용하기

 

다음과 같이 해당하는 svg 파일을  import 하되, 여러개를 import 할거라면 as 를 붙여서 이름을 변경해준다.

단, 여기서 맨 앞글자가 대문자가 되도록 해야함

import { ReactComponent as Check } from "assets/vector/checkbox/checkOn.svg";

 

이후 컴포넌트와 같이 사용하면, svg를 불러올 수 있다. 

<Check />