SVG 단순 아이콘, 효율적으로 사용하기

처음에는 SVG 아이콘을 쓸 때마다
각 아이콘마다 컴포넌트 파일을 하나씩 만들어야 했다.
예를 들어 CheckIcon.tsx, SpinnerIcon.tsx 같은 식으로
계속 파일이 늘어났다.

파일이 늘어난다는건 관리 리소스가 더 증가한다는 것으로 비효율적이기에
아이콘의 path만 따로 데이터로 관리하고 공통 SVG 컴포넌트 하나에서
필요할 때 path만 넣어서 쓰는 식으로 변경 해서 사용해봤더니 상당히 편해서 이를 정리해본다.

🧩 공통 SVG 컴포넌트 구조

import * as React from "react";
import Svg, { Path } from "react-native-svg";

type IconSvgPropsType = {
  width: number;
  height: number;
  data: string | string[];
  color: string;
  useStroke?: boolean;
  strokeWidth?: number;
  viewBoxSize?: number;
};

const IconSvg: React.FC<IconSvgPropsType> = ({
  width,
  height,
  data,
  color,
  useStroke = false,
  strokeWidth = 1.25,
  viewBoxSize = 24,
}) => {
  const renderPaths = () => {
    if (Array.isArray(data)) {
      return data.map((d, index) => (
        <Path
          key={`${index}-${d}`}
          d={d}
          {...(useStroke
            ? {
                stroke: color,
                strokeWidth,
                strokeLinecap: "round",
                strokeLinejoin: "round",
                fill: "none",
              }
            : { fill: color })}
        />
      ));
    } else {
      return (
        <Path
          d={data}
          {...(useStroke
            ? {
                stroke: color,
                strokeWidth,
                strokeLinecap: "round",
                strokeLinejoin: "round",
                fill: "none",
              }
            : { fill: color })}
        />
      );
    }
  };

  return (
    <Svg
      width={width}
      height={height}
      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
      fill="none"
    >
      {renderPaths()}
    </Svg>
  );
};

export default IconSvg;

인자로 받아오는 path data는 따로 아래와 같이 분리하여 관리한다

export const SVG_PATHS_DATA = {
  SPINNER: "M12 2 A10 10 0 1 1 2 12",
  CHECK: "M5 13L9 17L19 7",            
}; 

🎨 사용 예시

<IconSvg
  width={36}
  height={36}
  data={SVG_PATHS_DATA.SPINNER}
  color="#2196f3"
  useStroke={true}
  strokeWidth={2}
  viewBoxSize={18}
 />

<IconSvg
  width={24}
  height={24}
  data={SVG_PATHS_DATA.CHECK}
  color="#4caf50"
  useStroke={false}
  viewBoxSize={12}
 />

🛠️ 수정 후 편한점

아이콘을 path 데이터로만 관리하니 새 아이콘 추가, 색상이나 스타일 바꿀 때
파일 하나만 바꾸거나 path만 추가하면 끝이라 확장성과 유지보수가 훨씬 쉬워졌다.

🚨 SVG 사이즈가 원하는 대로 안 바뀌었던 이유

width나 height를 바꿨는데 아이콘 크기가 그대로이거나 잘리거나 한쪽에 쏠려 보였던 적이 있었다. 이럴 때는 대부분 viewBox가 path의 원본 좌표계를 바라보고 있지 않아서 그런것이다

SVG에서 viewBox는 “이 아이콘이 어디서부터 어디까지 그려지는지 정하는 기준” 역할을 한다.
viewBox만 path와 똑같이 맞춰주니 width/height 아무 값으로 줘도 아이콘이 비율 깨지지 않고 잘림 없이 딱 맞게 리사이징됐다.

이럴경우 SVG 파일을 받을 때 좌표계를 하나로(예: 24x24) 통일해서 export하고
컴포넌트에서 viewBox를 그 값으로 고정해서 쓰면 리사이징이 편하다

✅ 정리

• 아이콘 path만 따로 데이터로 관리하기

• width/height를 변경했을때 정상적으로 리사이징 되도록 viewBox는 path 원본 좌표계와 맞추기