리액트에서 SVG 사용하기

SVG

Scalable Vector Graphics로 각 위치 값을 표시하는 벡터와 같은 방식으로 깨지지 않고, 용량이 적고, 빠른 출력이 가능하며, 수정과 애니메이션이 가능하다.

Vector - 벡터 기반

확대나 축소를 해도 깨지지 않고 선명하게 볼 수 있다.
.svg

Raster - 비트맵 기반

비트맵 기반의 이미지이기 때문에 원래 크기보다 크게 보여지게 할 경우 이미지가 깨져서 보일 수 있다.
.jpeg, .gif, .png, .jpg

리액트에서 svg 사용하기

1. svg를 리액트 컴포넌트로 사용하기

이 방법은 하나의 svg 파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있다.

import { ReactComponent as newIcon } from 'assets/new_icon.svg';

<newIcon />

svg에서 바꾸고자 하는 요소를 'current'로 변경한다.

  <svg
  xmlns="http://www.w3.org/2000/svg"
  width="current" // svg에서 바꾸고자 하는 요소를 'current'로 변경한다.
  height="current"
  viewBox="0 0 24 24"
>
  <path fill="current" fill-rule="evenodd" d="...." />
</svg>

current로 변경해준 property는 사용하는 컴포넌트에서 props로 커스텀할 수 있다.

import { ReactComponent as newIcon } from 'assets/new_icon.svg';

<newIcon width='20' height='20' fill='red' />

2. png나 jpg와 같이 img src로 가져오기

import newIcon from 'assets/new_icon.svg';

<img src={newIcon} />

참고

https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0