같은 아이콘이 한 페이지에 30번 나온다고 <path> 데이터를 30번 복사할 필요는 없습니다. SVG 스프라이트를 쓰면 각 아이콘을 한 번만 정의하고 어디서나 참조할 수 있습니다 — 깔끔한 마크업, 작은 HTML, 캐시 가능한 단일 파일.
각 아이콘을 한 번 정의
각 아이콘을 고유 id와 viewBox를 가진 <symbol>로 감싸세요. 모음을 페이지 상단의 숨긴 <svg>에 두거나 별도 sprite.svg 파일로 만듭니다:
<!-- Define once (e.g. near the top of <body>, or in an external sprite.svg) -->
<svg style="display:none">
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 2l3 7 7 .5-5 4.5 1.5 7L12 17l-6 4 1.5-7-5-4.5L9 9z" />
</symbol>
</svg><use>로 참조
이제 작은 <use> 참조만으로 어디서나 아이콘을 넣습니다 — path 중복이 없습니다. 같은 문서의 symbol을 가리키거나 외부 스프라이트 파일 안의 것을 가리킬 수 있습니다:
<!-- Reuse anywhere — no markup duplication -->
<svg class="icon"><use href="#icon-star" /></svg>
<!-- …or from an external file (all modern browsers): -->
<svg class="icon"><use href="/sprite.svg#icon-star" /></svg>currentColor로 테마
symbol이 fill="currentColor"(또는 fill 없이 stroke)를 쓰면 각 <use>는 주변 텍스트 색을 상속합니다 — 같은 아이콘을 추가 파일 없이 내비에선 검정, 푸터에선 흰색으로 쓸 수 있습니다:
.icon { width: 24px; height: 24px; fill: currentColor; }인라인 vs 외부 스프라이트
- 인라인 스프라이트(HTML 내): 어디서나 동작, 추가 요청 없음. 다만 symbol 마크업이 모든 페이지에 함께 실립니다.
- 외부 스프라이트(
sprite.svg#id): 페이지 간 공유되는 캐시 파일 하나. 현행 브라우저 모두 지원하며, IE 11에서만 동작하지 않아 폴리필이 필요했습니다.
외부 <use href="sprite.svg#id">는 동일 출처(또는 CORS 허용)여야 합니다. 호스트 페이지에서 외부 symbol 내부까지 스타일링하는 데는 제약이 있으니, 내부 path를 노리기보다 currentColor로 테마하세요.
언제 스프라이트를 쓸까
사이트 전반에서 재사용되는 고정 UI 아이콘 세트에 스프라이트가 빛납니다. 컴포넌트 프레임워크라면 아이콘을 컴포넌트(React·Vue)로 임포트하는 편이 더 단순하고 미사용분을 트리셰이킹합니다. Icony에서 <symbol>에 바로 쓸 깔끔한 SVG를 내보내고 각자 명확한 id를 붙여 스프라이트를 조립하세요.