Sprite를 활용한 svg 파일 관리하기

Sprite란?

• 하나의 이미지 파일에 여러 이미지를 붙여넣고 좌표를 통해서 이미지를 불러오는 것
• 네이버를 개발자 도구로 살펴보면 메일 아이콘의 ::before와 ::after에 바탕 이미지의 좌표와 메일 이미지 좌표를 불러와서 아이콘을 만든 것을 알 수 있다.

그렇다면 svg 파일은 어떻게??
<symbol>, <use> 요소를 이용해 이미지 Sprite의 좌표를 가져오듯 사용할 수 있다.

• <symbol> : 각각의 svg 정보가 존재하고 고유한 id값이 존재
• <use> : href 속성에 id symbol 경로를 넣어 원하는 svg를 렌더링

---

과정

1. Figma에서 svg파일 Export
   ❗️ 컴포넌트 이름이 파일명과 <symbol>의 id가 됨
   ❗️ width, height를 정수로 맞추고 export 하는게 브라우저에 랜더링 했을 때 정렬이 잘 되는 느낌(경험상)

2. Spritebot 다운로드
   여러 개의 svg 파일을 각각 <symbol> 요소로 변경해서 하나의 파일로 생성해주는 도구

   GitHub - thomasjbradley/spritebot

3. sprites.svg 생성
   Spritebot에 Figma에서 다운로드 받은 svg 파일들을 업로드하고 sprites.svg 생성

4. <use> 요소의 href 속성으로 원하는 svg 불러오기

   <svg>
     <use href={`/sprites.svg#${id}`}/>
   </svg>
   
   // xlinkHref 속성으로도 불러올 수 있음 (차이점은 잘 모룸..)
   <svg>
     <use xlinkHref={`/sprites.svg#${id}`}/>
   </svg>

---

유의사항

• sprite.svg 파일의 fill 속성은 경로의 색상, stroke 속성은 경로의 테두리 색상이다.
  fill 속성을 currentColor 값으로 설정하면 부모 요소의 color(폰트) 색상에 따라서 색상을 변경할 수 있음.

  <svg style={{ color }}>
    <use href={`/sprites.svg#${id}`} />
  </svg>

• <use>의 크기를 조절하는 것이 가능한가?? (잘 모르는 내용임)
  <use>의 width와 height는 부모 <svg>에 의해 제어됨
  • <svg>의 viewBox와 width, height가 <use>에 직접 width, height를 설정하는 것보다 더 큰 영향을 준다.
  • <use> 내부의 요소 크기를 조정하려면 transform="scale(x, y)"을 사용하는 방법이 있다.

색상과 크기 조절에 대한 자세한 내용은 MDN 웹 문서 SVG 튜토리얼 참고.