나는 이렇게 학습한다/Frontend

Next.js14 에서 SVG 이미지 색상을 동적으로 변경하는 방법

daco2020 2024. 9. 26. 17:12
반응형

SVG 색상 변경 문제

개발을 하다 보면 SVG 파일의 색상을 상황에 따라 바꿔야 할 때가 있습니다. 아이콘이나 로고 색상을 테마에 맞춰 변경하거나, 사용자 인터랙션에 따라 유연하게 조절하고 싶은 경우도 있을 거예요.

 

저의 경우 종이비행기 SVG 이미지를 만들었는데요. 배경색과 그림자색을 동적으로 할당하여 사용자에게 시각적인 즐거움을 주고 싶었습니다.

 

같은 색상의 아이콘만 있으면 시각적으로 지루해진다

 

 

하지만 그렇다고 매번 SVG 코드를 수정하는 것은 번거로운 일이죠.🥵 한 번 생각해보세요. 프로젝트에서 SVG를 사용하고 있고, 그 색상을 자주 변경해야 한다면 어떻게 하시겠어요? SVG 파일을 열어서 직접 fill 속성을 바꿔주나요? 아니면 특정 상황마다 다른 색상으로 변환된 이미지를 새로 준비하나요?

 

이 글에서는 SVG의 색상을 동적으로 변경하는 방법을 알아보겠습니다. Next.js를 사용하면 SVG를 마치 React 컴포넌트처럼 다룰 수 있거든요!

 

 

SVG를 동적으로 다루기 위한 설정 방법

1. next-svgr 패키지 설치

SVG를 React 컴포넌트처럼 다루기 위해 next-svgr을 사용합니다. 이 패키지는 SVG를 쉽게 컴포넌트로 import할 수 있게 해주죠.

npm install next-svgr

2. next.config.js에서 설정 추가

설치를 완료했다면 Next.js 설정 파일에 next-svgr을 추가합니다.

// next.config.js
import withSvgr from "next-svgr";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withSvgr(nextConfig);

 

이렇게 설정하면 SVG를 React 컴포넌트처럼 사용할 준비가 완료됩니다!

 

 

SVG 파일에 fill 동적으로 적용하기

SVG 파일 준비

SVG 파일을 동적으로 다루려면 하드코딩된 fill 속성을 제거해야 합니다. 그렇지 않으면 React에서 fill 색상을 변경할 수 없게 되죠. SVG 파일에 기재된 `fill` 속성을 제거하지 않으면 동적으로 색상을 할당해도 적용되지 않으니 꼭 확인해주세요!

 

이 글에서는 paper-plane-body.svg 라는 파일을 예시로 설명하겠습니다.

<!-- paper-plane-body.svg -->
<svg width="115" height="115" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg">
  <!-- `fill` 속성을 삭제 -->
  <path d="M..." />
</svg>

 

위와 같이 SVG 파일의 fill 속성을 삭제해 줍니다.

 

 

SVG 컴포넌트로 가져와서 동적 색상 변경

SVG 파일이 준비되었으니 이제 React에서 동적으로 색상을 변경해 보겠습니다.

import PaperPlaneBody from "/public/paper-plane-body.svg";

export default function PaperPlaneIcon({ bodyColor }: { bodyColor: string }) {
  return (
    <div className="w-[115px] h-[115px]">
      {/* `fill` 속성을 props로 전달하여 동적으로 변경 */}
      <PaperPlaneBody style={{ fill: bodyColor }} />
    </div>
  );
}

 

이렇게 하면 PaperPlaneBody는 SVG 파일이 React 컴포넌트로 변환된 것이며, fill 속성을 통해 동적으로 색상을 변경할 수 있습니다. 신기하죠? 😉

 

 

사용 예시

export default function App() {
  return (
    <div>
      {/* 아이콘에 동적으로 색상 할당 */}
      <PaperPlaneIcon bodyColor="#4ACA57" />
      <PaperPlaneIcon bodyColor="#FF6347" />
      <PaperPlaneIcon bodyColor="#1A6221" />
    </div>
  );
}

 

PaperPlaneIcon 컴포넌트에 전달된 bodyColor prop에 따라 아이콘의 색상이 동적으로 변경됩니다! 원하는 테마나 상황에 맞춰 아이콘 색상을 쉽게 조절할 수 있죠.

 

 

 

결과

위의 예제에서는 body SVG만 적용했지만 그림자나 선 SVG 도 각각 적용할 수 있습니다.

이를 적용한 제 결과물은 다음과 같습니다.

 

 

짜잔~ 알록달록한 종이비행기들이 만들어졌죠? 👏👏👏

 

이상으로 Next.js에서 SVG의 색상을 동적으로 변경하는 방법을 배웠습니다. 이 방법을 통해 여러분도 알록달록한 SVG 이미지들을 그려보시기 바랍니다.

 

 

✅ 요약

  1. next-svgr로 SVG를 React 컴포넌트로 import.
  2. SVG의 fill 속성을 삭제해 동적 변경 가능하게 하기.
  3. fill을 동적으로 props로 전달하거나 CSS 변수로 관리하기.
반응형