React에 svg 가져오기

폴더 구조

icon 폴더를 만들어 leftArrow.svg와 rightArrow.svg파일을 넣었습니다.

1. 이미지 태그 사용하기

import leftArrow from '../icon/leftArrow.svg';

+ return 영역
<img src={leftArrow} alt="leftArrow" />

2. ReactComponent 사용하기

import { ReactComponent as LeftArrow } from '../icon/leftArrow.svg';
import { ReactComponent as RightArrow } from '../icon/rightArrow.svg';


+ return 영역

<div ref={navPrev} className="btn prev"><LeftArrow /></div>
<div ref={navNext} className="btn next"><RightArrow /></div>

화살표가 생겼습니다.

3. ReactComponent 사용하기 + 색깔 바꾸기

-- leftArrow.svg, rightArrow.svg
해당 icon은 stroke에만 색이 칠해져 있으므로 
stroke="current" 
으로 바꿔줍니다.

-- Main.js에서 stroke색을 "#91acff"로 지정해줍니다.
<div ref={navPrev} className="btn prev"><LeftArrow stroke="#91acff" /></div>
<div ref={navNext} className="btn next"><RightArrow stroke="#91acff" /></div>

화살표의 색상이 바뀌었습니다.

+) 사용한 svg 코드

-- leftArrow.svg
<svg xmlns="http://www.w3.org/2000/svg" width="10.106" height="17.017" viewBox="0 0 10.106 17.017">
    <path id="패스_45000" data-name="패스 45000" d="M6.633,24.311,0,32.055l7,7.256" transform="translate(2.026 -23.336)" fill="none" stroke="current" stroke-width="3"/>
  </svg>
  
  
  --rightArrow.svg
  <svg xmlns="http://www.w3.org/2000/svg" width="10.106" height="17.017" viewBox="0 0 10.106 17.017">
    <path id="패스_45000" data-name="패스 45000" d="M.367,24.311,7,32.055,0,39.311" transform="translate(1.08 -23.336)" fill="none" stroke="current" stroke-width="3"/>
  </svg>
  
  

+) import { ReactComponent as RightArrow } from '../icon/rightArrow.svg';
처럼 { ReactComponent as 이름 }을 사용할 때, 이름의 첫 글자는 대문자여야지만 에러가 나지 않습니다. 소문자인 경우 아이콘이 나오지 않습니다.