들어가며😃

프로젝트에서 로고, 랜딩페이지에 나타나는 이미지들을 제작하면서 svg파일을 다루게 되었다. 사실 이전까지는 png, jpg 파일 들을 이용하면서 svg 파일을 써야하는 이유를 체감하지 못하고 있다가, 화면 사이즈가 커지면서 이미지가 완전 깨져보이는 현상을 경험과 동시에
++프로젝트 내에서 다크모드/라이트모드를 적용하며 해당 모드에 따른 이미지를 2개 제작하는 것보다 svg 파일에 속성 하나만 추가함으로 쉽게 색상을 조정할 수 있는 법이 있음을 알고 기존 이미지 파일을 svg 파일로 변경하게 되었다.
우리 프로젝트는 넥스트 기반으로 구현된거라 리액트에서 svg를 설정하는 법에 약간 더 추가 설정이 필요했다. 어렵지 않으니 다들 쉽게 svg 사용 전 세팅을 무리없이 클리어 할 수 있을 것이다!!


리액트에서 svg 파일 사용하기

우선 images 파일에 제작한 혹은 사용할 svg 파일을 추가한다. 그리고 사용하는 방식에는 2가지가 있다!

방법1. img 태그의 src 속성에 경로를 지정해준다.

<img src="이미지 경로">

방법2. 컴포넌트에서 svg파일을 ReactComponent as xxx 처럼 import 해온다.

import SvgIcon from "assets/images/icon.svg";

<SvgIcon />;




넥스트에서 svg 파일 사용하기

1. 넥스트에서 리액트에서 하는 방식처럼 컴포넌트식으로 불러오기를 하면 에러가 뜨기 때문에 @svgr/webpack을 설치해줘야 한다.

2. next.config.js 수정해준다.

const nextConfig = {
  // 기존설정에 아래 추가
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

module.exports = nextConfig;


3. 리액트와 똑같이 컴포넌트에서 svg파일을 ReactComponent as xxx 처럼 import 해온다.

import SvgIcon from "assets/images/icon.svg";

<SvgIcon />;




svg 컬러, 크기 속정 조정하기

예를 들어 아래는 프로젝트에서 사용한 번개 이미지이다.

스크린샷 2023-06-12 오후 8 36 22

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.45 28" height="current">
<defs>
</defs>
<path fill="current" d="M0,28c.16-.63.31-1.26.47-1.9q1.5-6,3-11.94c.06-.24,0-.28-.13-.27H.05c.14-.6.27-1.18.4-1.75L3.12.24c0-.15.07-.24.2-.24h7.13L6.07,11.24H9.43L.05,28Z"/>
</svg>

해당 svg 소스에서 사용자화 하고 싶은 속성을 current로 바꿔준다.

그리고 컴포넌트에 props를 내려준다.

<MainLogo fill={theme.textColor} height="100%" />

숫자 및 컬러를 하드코딩해줘도 되고 위처럼 변수로 받을 수도 있다. 나는 다크/라이트 모드에 따라 컬러를 다르게 설정해줘야해서 변수로 컬러속성을 받았다.


그리고 아래와 같이 컬러가 잘 변경되는 것을 확인 할 수 있다.

ezgif com-video-to-gif





svg파일의 해상도가 보존되니 확실이 이미지가 쨍하고 훨씬 보기 편해졌다. 그리고 색상설정을 위해 다중파일을 만들 필요도 없으니 사용하는, 구현하는 입장에서도 편하다. 로고를 제작하고 svg 파일로 적용해봤는데 결과물이 꽤 괜찮은 것 같아 매우 뿌듯한 지금ㅎ😎🔥