React에서 svg파일을 사용해보자 (w/ webpack)

SVG란?

SVG란 ‘Scalable Vector Graphics’의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 그래픽용 XML기반의 형식

우리가 흔히 아는 이미지 파일은 .jpeg .png와 같은데,

확대를 하면 화질이 깨지는 것을 볼 수 있는 반면, .svg파일의 이미지는 화질이 깨지지 않는다.

.png .jpeg는 화질이 깨지는 이유가 무엇일까?
비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현이다. 원래 크기보다 크게 보여지게 할 경우 이미지가 깨져서 보인다

React에서 svg파일을 사용하는 방법을 알아보자

1.img 태그로 src에 이용하는 경우

기존의 png, jpeg와 동일하게 사용하면 된다.

import File from 'assets/file_icon.svg';

<img src={File} />

위 코드처럼 svg파일을 불러올 수 있지만, 색상이나 크기를 변경할 때마다 svg파일이 필요하다

 

2. svg를 React 컴포넌트로 변환하여 사용하기

svg파일의 코드를 복사하여, 컴포넌트를 만들고 return 이후에 붙여넣어줘서 사용하면 된다.

단, 크기 및 색상을 props로 변환한다.

const File = ({ height = 154, width = 159, color = '#E67A18' }: Props) => {
  return (
    <svg
      height={height} //props
      width={width}
      viewBox="0 0 189 176"
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
    >
      <ellipse cx="97.6086" cy="32.1655" rx="27.977" ry="32.1655" fill="#E67A18" />
      <ellipse cx="51.602" cy="38.8412" rx="27.977" ry="25.4897" fill="#E67A18" />
      <path
        d="M59.6842 86.7866C59.6842 104.551 46.3234 118.952 29.8421 118.952C13.3608 118.952 0 104.551 0 86.7866C0 69.0221 13.3608 54.6211 29.8421 54.6211C46.3234 54.6211 59.6842 69.0221 59.6842 86.7866Z"
        fill="#E67A18"
      />
      <ellipse cx="51.602" cy="131.697" rx="27.977" ry="32.1655" fill="#E67A18" />
      <ellipse cx="97.6086" cy="143.834" rx="27.977" ry="32.1655" fill="#E67A18" />
      <ellipse cx="142.372" cy="131.697" rx="27.977" ry="32.1655" fill="#E67A18" />
      <ellipse cx="155.428" cy="89.2134" rx="33.5724" ry="32.1655" fill="#E67A18" />
      <ellipse cx="142.372" cy="40.0552" rx="27.977" ry="24.2759" fill="#E67A18" />
      <path
        d="M147.967 89.2142C154.184 129.876 124.029 139.587 94.5 139.587C64.9709 139.587 38.5461 129.269 41.0329 89.2142C41.0329 61.3943 55.954 41.2694 94.5 38.8418C130.559 42.4832 147.967 61.3943 147.967 89.2142Z"
        fill="#FCDC6D"
      />
      <ellipse cx="74.6053" cy="74.0417" rx="4.97368" ry="4.85517" fill="#2B2B2B" />
      <ellipse cx="110.664" cy="74.0417" rx="4.97368" ry="4.85517" fill="#2B2B2B" />
      <path
        d="M100.717 88.6132C100.717 91.2946 97.0308 95.89 93.476 95.89C89.9212 95.89 87.0394 91.2946 87.0394 88.6132C87.0394 85.9318 90.7257 86.1862 94.2805 86.1862C97.8353 86.1862 100.717 85.9318 100.717 88.6132Z"
        fill="#2B2B2B"
      />
      <ellipse cx="54.7104" cy="49.7652" rx="9.94737" ry="7.28276" fill="#FCDC6D" />
      <ellipse cx="135.533" cy="49.7652" rx="9.94737" ry="7.28276" fill="#FCDC6D" />
      <line
        x1="0.5"
        y1="-0.5"
        x2="22.2938"
        y2="-0.5"
        transform="matrix(0.939254 0.343224 -0.358055 0.9337 57.1974 83.752)"
        stroke="#C5925B"
        strokeLinecap="round"
      />
      <line
        x1="0.5"
        y1="-0.5"
        x2="22.2819"
        y2="-0.5"
        transform="matrix(0.92785 0.372952 -0.388654 0.921384 110.664 95.8896)"
        stroke="#C5925B"
        strokeLinecap="round"
      />
      <path d="M58.4408 104.24L78.2926 95.8894" stroke="#C5925B" strokeLinecap="round" />
      <line
        x1="0.5"
        y1="-0.5"
        x2="22.312"
        y2="-0.5"
        transform="matrix(0.956429 -0.291965 0.305078 0.952327 110.664 90.4121)"
        stroke="#C5925B"
        strokeLinecap="round"
      />
      <path
        d="M81 111.011L94.5189 109.913L102.921 107.542L105.62 103"
        stroke="#2B2B2B"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};

이렇게 변경한 svg파일의 컴포넌트는

import File from '../File';

const App () => {
	return(
			<>
				<File />
				<File color={"red"} /> //props를 변경할 수 있다.
			</>	
	)
}

위와 같이 props를 변경할 수 있다.

 

3. svgr을 통해 React Component로 사용하기

yarn add -D @svgr/webpack

svgr/webpack을 개발환경에 설치가 사전에 이루어져야하며, webpack을 설정해줘야한다.

webpack 포스팅은 여기에 있다.

module.exports = {
  module: {
    rules: [
      {
        test: /\\.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
};

webpack.config.js 파일을 만들어 위 코드를 넣어준다.

import { ReactComponent as File } from "./public/folder.svg";

const App () => {
	return(
    		<>
			<File />
		</>	
	)
}

svgr 웹팩을 사용하면 따로 컴포넌트를 만드는 작업을 하지 않아도, 컴포넌트처럼 사용이 가능하다.