SVG-in-JS 제거하기

[leegwae]

🤸‍♂️ 목표

JS 빌드물의 크기를 줄이기로 했다. 먼저 SVG 파일을 JS 번들에서 제거해보자.

✨아이콘들을 SVG 스프라이트로 만들기

toquiz에서는 여러 아이콘을 사용하고 있다.

위 화면을 예로 들면 메뉴/계정/좋아요 아이콘이다. 현재는 src/components/vectors 폴더 아래에서 JSX로 만들어 사용하고 있다. 만약 이들을 모두 정적 에셋으로 바꾼다면 그 개수만큼 요청이 필요하다. 따라서 이런 아이콘들은 모두 SVG 스프라이트로 만들어 제공하겠다.

예시

// Add.tsx 
import type { SVGProps } from 'react';

import React from 'react';

export const Add = (props: SVGProps<SVGSVGElement>): JSX.Element => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="48"
    viewBox="0 -960 960 960"
    width="48"
    {...props}
  >
    <path d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z" />
  </svg>
);

위 JSX를 아래처럼 .svg로 구성해준다.

<-- icons.svg -->
<svg>
  <defs>
    <symbol
      id="add"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -960 960 960"
    >
      <path
        fill="currentcolor"
        d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z"
      />
    </symbol>
  </defs>
</svg>

1. svg 태그를 symbol 태그로 바꾼다.
2. 접근하기 위한 id를 제공한다.
3. path 태그 내에 fill="currentcolor"를 추가한다.

// MyPage.tsx
import React from "react";
import Icons from "/icons.svg?url";

export function MyPage(): JSX.Element {
  return (
    <svg className="h-6 w-6 text-primary">
      <use href={`${Icons}#add`} />
    </svg>
  );
}

이제 위와 같이 사용할 수 있다.

✨ 로고용 SVG를 정적 에셋으로 제공하기

가장 많은 분량을 차지한 로고용 SVG는 public 폴더 안의 정적 에셋으로 옮겼다.

🎉 SVG-in-JS 제거 결과

JS 빌드물의 크기가 523.75KB에서 402.55KB로 약 20% 줄어들었다!

기타

SVG 스프라이트를 자동으로 생성하는 툴을 찾아보거나 직접 만들어봐야겠다.

참고

https://kurtextrem.de/posts/svg-in-js