React | SVG 사용

1. img에 src로 사용하기

일반적으로 이미지 불러오기와 방법 동일함

import heart_img from "../images/heart.svg";

 

<img src={heart_img}/>

 

2. 컴포넌트로 불러오기

svg파일 수정

변경하고 싶은 부분의 값을 current로 바꾸기

<svg
  height='current' 
  width='current'  
  fill="current" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
   x="0px" y="0px" 
   viewBox="0 0 60 60" 
   style="enable-background:new 0 0 60 60;" 
   xml:space="preserve"
>
<path d="..."></path>
</svg>

 

컴포넌트로 불러와 사용

import { ReactComponent as HeartImg } from "../images/heart.svg";

 

props를 이용해 width값, height값, fill(색상)을 변경할 수 있음

 <HeartImg width="30" height="30" fill="#FF6666" />