# svg 다루기

svg는 png와 다르게 아이콘의 색, 크기 등 요소를 디자인에 따라 바꿀 수 있는 파일입니다. 또한 용량이 png와 다르게 매우 작아서 프로젝트 관리가 더욱 용이합니다.

그렇다면 react와 next에서는 어떻게 svg를 다루는지 알아보겠습니다.

# svg 예시

  • 파일경로 : assets/icon-24-reservation.svg
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <path fill="#fff" fill-rule="evenodd" d="...." />
</svg>

# react에서 svg 사용법

  • 위처럼 svg 예시가 있습니다.

# 1. img src에 이용

import Reservation from 'assets/icon-24-reservation.svg'

<img src={Reservation}>

위처럼 img로 넣을 수도 있지만, 저는 2번 방식을 더 즐겨 사용합니다.

# 2. svg를 컴포넌트로 만들기

import { ReactComponent as Reservation } from "assets/icon-24-reservation.svg";

<Reservation />;

# svg 색, 크기 바꾸기

2번 방식을 사용하시면 아래 방법으로 svg의 색, 크기를 쉽게 변경 할 수 있습니다.

# 먼저 svg에서 바꾸고자 하는 요소를 current로 바꿔줍니다.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="current"
  height="current"
  viewBox="0 0 24 24"
>
  <path fill="current" fill-rule="evenodd" d="...." />
</svg>

# 사용하는 컴포넌트에 props로 current 값을 지정하여 내려줍니다.

import { ReactComponent as Reservation } from "assets/icon-24-reservation.svg";

<Reservation width="10" height="10" fill="blue" />;

위 방법을 사용하면 하나의 svg로 다양한 크기, 색상을 이용할 수 있습니다.

# next에서 svg 사용하기

next에서는 react에서 사용하는 방식으로 svg를 읽으면 svg를 읽을 수 없다는 에러가 뜹니다. 그렇기 때문에 아래와 같이 진행합니다.

# @svgr/webpack 설치

yarn add -D @svgr/webpack

# next.config.js 수정

module.exports = withTM({
  reactStrictMode: true,
  webpack: config => {
    // 아래를 추가합니다.
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
});

# svg 읽어오기

  • 위와 같이 세팅을 완료했으면 아래와 같이 컴포넌트 형식으로 svg를 가져올 수 있습니다.
import Ci from "assets/svg/ci.svg";

const Index = () => {
  return <Ci />;
};
export default Index;
#react #next
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 6/23/2022, 11:25:42 AM