웹 앱을 위한 SVG 아이콘 만들기: 설계부터 프로덕션까지

- 로딩 지연 (FOIT — 보이지 않는 텍스트 깜빡임)
- 안티앨리어싱 문제
- 멀티컬러 지원 제한
- 접근성 문제
- HTTP 요청 오버헤드
- CSS 의존성

- 다양한 밀도에 대한 여러 버전 (1x, 2x, 3x)
- 큰 파일 크기
- 스타일 커스터마이징 불가
- 고정된 색상
- 다수의 HTTP 요청

- 모든 크기에 하나의 파일
- HTML에 인라인 (HTTP 요청 없음)
- CSS 스타일링
- JavaScript 애니메이션
- 모든 화면에서 완벽
- 작은 파일 크기
- 멀티컬러 지원
- 완전한 접근성

<svg class="icon icon-check" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

.icon {
  width: 24px;
  height: 24px;
  color: #1cb721;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2"/>
  </symbol>
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<svg class="icon">
  <use href="/sprite.svg#icon-check"/>
</svg>

<img src="/icons/check.svg" alt="체크 아이콘" width="24" height="24">

.icon-check {
  width: 24px;
  height: 24px;
  background: url('/icons/check.svg') no-repeat center;
  background-size: contain;
}

const icons = ['check', 'close', 'menu', 'search'];

async function convertIcons() {
  for (const icon of icons) {
    const pngPath = `./icons/png/${icon}.png`;
    const svgPath = `./icons/svg/${icon}.svg`;
    // VectoSolve API에 업로드
    // 최적화된 SVG 다운로드
  }
}

npm install -g svgo
svgo input.svg -o output.svg

.icon {
  color: #1cb721;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 크기 변형 */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* 색상 변형 */
.icon-primary { color: #1cb721; }
.icon-danger { color: #dc3545; }
.icon-warning { color: #ffc107; }

.icon-button {
  color: #666;
  transition: color 0.2s, transform 0.2s;
}

.icon-button:hover {
  color: #1cb721;
  transform: scale(1.1);
}

interface IconProps {
  name: string;
  size?: number;
  className?: string;
  color?: string;
}

export function Icon({ name, size = 24, className, color }: IconProps) {
  return (
    <svg
      className={`icon icon-${name} ${className || ''}`}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      style={{ color }}
    >
      <use href={`/sprite.svg#icon-${name}`} />
    </svg>
  );
}

<template>
  <svg :class="['icon', `icon-${name}`]" :width="size" :height="size" viewBox="0 0 24 24" fill="none">
    <use :href="`/sprite.svg#icon-${name}`" />
  </svg>
</template>

async function loadIconSprite() {
  const response = await fetch('/sprite.svg');
  const svg = await response.text();
  document.body.insertAdjacentHTML('afterbegin', svg);
}

<!-- 장식용 아이콘 -->
<svg aria-hidden="true" focusable="false">
  <use href="#icon-check"/>
</svg>

<!-- 인터랙티브 아이콘 -->
<button>
  <svg role="img" aria-labelledby="check-title">
    <title id="check-title">완료로 표시</title>
    <use href="#icon-check"/>
  </svg>
</button>