[핀더펜] 이미지 스프라이트 적용

이미지 스프라이트란?

나의 이미지 파일에 페이지에서 사용할 여러가지 이미지들을 넣어 좌표와 범위를 통해 특정 이미지를 불러오는 기법


한번의 이미지 로딩을 통해 여러가지 이미지를 불러올 수 있음

 

적용 방법

1. spritebot 설치

2. 이미지 선택, sprite sheet 생성 

스프라이트 시트를 저장한 결과 svg 파일이 <symbol> 태그로 감싸져 있는 것을 확인할 수 있었다.

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="loan-interest" viewBox="0 0 42 42">
        <rect width="42" height="42" fill="#F4E2EC" rx="21"/>
        <path fill="#fff" d="M21 33c6.627 0 12-5.373 12-12S27.627 9 21 9 9 14.373 9 21s5.373 12 12 12z"/>
        <path fill="#EE7DC1" d="M29.896 35.207a5.122 5.122 0 1 0 0-10.244 5.122 5.122 0 0 0 0 10.244z"/>
        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width=".9"
              d="M29.895 26.894v3.698l1.965 1.965"/>
        <path stroke="#EE7DC1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
              d="M17.854 19.588a1.734 1.734 0 1 0 0-3.468 1.734 1.734 0 0 0 0 3.468zm6.291 6.292a1.734 1.734 0 1 0 0-3.469 1.734 1.734 0 0 0 0 3.468zm1.183-9.544l-8.991 8.992"/>
    </symbol>
    <symbol id="events" viewBox="0 0 42 42">
        <rect width="42" height="42" fill="#DFEDF9" rx="21"/>
        <path fill="#127FE5"
              d="M11.732 29.748h18.537c.715 0 1.295-.58 1.295-1.295V13.547c0-.716-.58-1.296-1.296-1.296H11.732c-.715 0-1.295.58-1.295 1.296v14.906c0 .716.58 1.296 1.296 1.296z"/>
        <path fill="#349DFF"
              d="M21.589 20.486l9.492 7.581c.698.558.304 1.682-.589 1.682H11.508c-.893 0-1.287-1.124-.59-1.681l9.493-7.582a.944.944 0 0 1 1.178 0z"
              opacity=".7"/>
        <path fill="#52ACFF"
              d="M21.877 23.37l9.34-8.988c.821-.79.262-2.175-.876-2.175H11.66c-1.139 0-1.697 1.386-.877 2.175l9.341 8.987c.49.471 1.264.471 1.753 0z"/>
    </symbol>
    ...
</svg>

 

Spritebot에서 제공한 사용 방법은

<svg><use xlink:href={`${SocialSpriteSVG}#${id}`} /></svg>

와 같은 방법이었지만 나의 경우 xlink에서 오류가 나는 문제가 발생했다. 그래서 xlink를 제거하고 아래의 방법으로 사용했다.

<use href={`${SocialSpriteSVG}#${id}`} />

 

아이콘 컴포넌트

여러 아이콘을 하나로 합쳐서 파일을 생성했기 때문에 아이콘을 사용할 수 있는 컴포넌트를 제작해줬다.

export interface IconSVGProps {
  id: string;
  size: number;
}

function IconSVG({ id, size }: IconSVGProps) {
  return (
    <svg fill="none" width={size} height={size}>
      <use href={`${SocialSpriteSVG}#${id}`} />
    </svg>
  );
}

 

이미지의 사이즈가 설정한 대로 변할 수 있도록 아이콘의 사이즈를 함께 props로 받았고, 아이콘을 특정할 수 있는 아이콘의 이름을 id로 받아 아이콘을 그려주고 있다.

 

fill을 none으로 부여한 이유는 원본 svg의 fill 속성이 none이었기 때문에 사용하던 아이콘을 그대로 그리기 위해서 부여한 것이다.

 

사용 예시

<IconSVG id={"alarm"} size={24} />