기존에는 어떻게 처리했을까

<Image /> 컴포넌트 사용

Next.js에서 기본적으로 제공되는 컴포넌트를 사용하는 방식이라 @svgr을 모른다면 제일 먼저 떠올렸을 선택지다.

import Image from 'next/image';
import myIcon from './icon.svg';

export default function Page() {
  return <Image src={myIcon} alt="my icon" />;
}

기본적인 최적화, 해시 기반 캐싱, 고유 width/height 추출 등 장점이 있다. 하지만 아이콘 용도로 쓰기엔 두 가지 문제가 있다.

아이콘마다 별도 네트워크 요청이 발생한다.
SVG가 인라인이 아니기 때문에 CSS로 색상을 바꿀 수 없다

로고나 사이즈가 큰 일러스트에는 잘 맞지만, 작은 아이콘에는 적합하지 않다.

@SVGR

실무에서 제일 많이 사용하는 방식으로 SVG를 React 컴포넌트로 변환해서 사용하는 방식이다.

import Icon from './icon.svg';

export default function Page() {
  return <Icon className="text-red-500" />;
}

SVG가 DOM에 직접 인라인되기 때문에 즉시 렌더링되고 CSS로 자유롭게 스타일링할 수 있다.

다만 치명적인 단점이 있다. SVG 마크업 전체가 JavaScript 번들에 포함된다.

아이콘 하나하나는 작아 보여도, 수십 개가 쌓이면 번들 사이즈에 영향을 준다.

번들 사이즈 영향을 주는 내용에 대해 잘 정리된 글이 있다. Breaking Up with SVG-in-JS

불필요한 DOM 노드, 추가 JS 파싱 비용, 정적 에셋임에도 JS로 처리되는 비효율에 대한 내용을 다룬다.

SVG Sprite

여러 SVG를 하나의 파일로 묶고 <use> 태그로 참조하는 방식이다.

// sprite.svg
<svg>
  <symbol id="icon1"><path d="..." /></symbol>
</svg>

// 사용
<svg><use href="/sprite.svg#icon1" /></svg>

네트워크 요청을 최소화할 수 있다는 점은 좋지만, Turbopack 환경에서는 문제가 생긴다.

Turbopack 로더는 현재 JavaScript 출력만 지원하고, Webpack의 this.emitFile()에 해당하는 기능이 없다. 로더 기반으로 sprite를 자동 생성하는 방식 자체가 Turbopack에서 동작하지 않는다.

별도 빌드 스크립트를 짜서 pre-build 단계에서 sprite를 생성하는 방법도 있지만, 실제로 사용되는 아이콘만 포함하기 어렵고 watch 연동도 번거롭다.

추가로 Safari에서 SVG 필터가 포함된 sprite 아이콘이 제대로 렌더링되지 않는 버그도 있다. 실무에서 쓰기엔 관리 비용이 생각보다 크다.

Turbopack으로 처리하기

기존 방법들을 쓰면서 필요하다고 느낀 것들을 정리하면 이렇다.

번들 사이즈에 영향을 주지 않을 것
CSS로 자유롭게 색상을 바꿀 수 있을 것
아이콘은 별도 네트워크 요청 없이 렌더링될 것
SVG 크기에 따라 처리 방식이 자동으로 분리될 것

이를 해결하기 위해 작은 SVG는 Data URI로 인라인하고, 큰 SVG는 Next.js 기본 동작으로 fallback한다. 두 경우 모두 동일한 { src, width, height } 형태로 export해서 <Image /> 컴포넌트와 호환되게 만든다.

커스텀 Turbopack 로더 만들기

$ npm install svgo mini-svg-data-uri image-size

// inline-svg-loader.js
const { optimize } = require("svgo");
const svgToMiniDataURI = require("mini-svg-data-uri");
const { imageSize } = require("image-size");

module.exports = function (content) {
  this.cacheable?.();

  const optimized = optimize(content);
  const src = svgToMiniDataURI(optimized.data);
  const { width, height } = imageSize(Buffer.from(content));

  return `export default ${JSON.stringify({ src, width, height })};`;
};

Turbopack 로더는 아직 ESM을 지원하지 않아서 CommonJS 문법으로 작성해야 한다.

이 로더를 next.config.js에 연결하면 된다.

// next.config.js
const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['./inline-svg-loader.js'],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

크기에 따라 조건부로 적용하기

모든 SVG를 인라인으로 처리하면 큰 파일까지 Data URI로 묶여버린다. Turbopack의 condition 옵션을 활용하면 파일 크기 기준으로 로더를 선택적으로 적용할 수 있다.

content 조건은 파일 전체 내용을 정규식으로 검사한다. 약 4KB 이하의 SVG에만 인라인 로더가 적용된다.

const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['./inline-svg-loader.js'],
        condition: {
          content: /^[\s\S]{0,4000}$/, // ~4KB 이하만 인라인
        },
        as: '*.js',
      },
    },
  },
};

결과적으로 아이콘의 형태는 SVG가 정의하고, 색상은 CSS가 제어한다.

// Icon.tsx
import { type ComponentProps } from 'react';
import { type StaticImageData } from 'next/image';

type IconProps = Omit<ComponentProps<'img'>, 'src'> & {
  src: StaticImageData;
};

const EMPTY_SVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E`;

export default function Icon({ src, width, height, style, ...props }: IconProps) {
  return (
    <img
      width={width ?? src.width}
      height={height ?? src.height}
      src={EMPTY_SVG}
      style={{
        ...style,
        backgroundColor: 'currentcolor',
        mask: `url("${src.src}") no-repeat center / contain`,
      }}
      {...props}
    />
  );
}

사용 방법은 기존과 거의 다르지 않다.

import Icon from './Icon';
import myIcon from './icon.svg';

// style로 색상 지정
<Icon src={myIcon} style={{ color: 'red' }} />

// Tailwind로 색상 지정
<Icon src={myIcon} className="text-green-600" />

// 크기와 색상 함께 지정
<Icon src={myIcon} width={32} height={32} className="text-blue-600" />

currentcolor를 활용하기 때문에 부모 요소의 color 값을 그대로 상속받는다.

마치며

@svgr만 사용하다가 Turbopack이 기본 번들러가 되기도 했고, turbopack-inline-svg-loader새로운 방법을 알게 되어 코드 분석겸 정리해본건데 작은 프로젝트에는 괜찮은 것 같다.

기존에 @svgr로 처리하던 것들을 완전히 대체할 수는 없겠지만 단순한 아이콘 사용 케이스라면 별도 플러그인 없이 로더 하나로 번들 사이즈도 줄이고 스타일링도 자유롭게 할 수 있다는 점에서 괜찮은 선택인 것 같다.

Turbopack에서 @svgr없이 SVG 아이콘 처리하기