SVG 스프라이트 시스템 구축: 효율적인 아이콘 관리

개별 아이콘:
50개 아이콘 x 1 요청 = 50 요청

SVG 스프라이트:
50개 아이콘 = 1 요청

<!-- sprites.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27..."/>
  </symbol>
</svg>

<!-- 사용법 -->
<svg class="icon">
  <use href="/sprites.svg#icon-home"/>
</svg>

<body>
  <!-- 숨겨진 스프라이트 컨테이너 -->
  <svg style="display: none;">
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="..."/>
    </symbol>
    <!-- 추가 심볼 -->
  </svg>

  <!-- 페이지 어디서든 사용 가능 -->
  <svg class="icon">
    <use href="#icon-home"/>
  </svg>
</body>

.icon-home {
  background-image: url("data:image/svg+xml,...");
}

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 공유 스타일 -->
    <style>
      .icon-stroke { stroke-width: 2; fill: none; }
    </style>
  </defs>

  <symbol id="icon-1" viewBox="0 0 24 24">
    <!-- 아이콘 경로 -->
  </symbol>

  <symbol id="icon-2" viewBox="0 0 24 24">
    <!-- 아이콘 경로 -->
  </symbol>
</svg>

// gulpfile.js
const svgSprite = require('gulp-svg-sprite');

gulp.task('sprite', () => {
  return gulp.src('icons/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          dest: '.',
          sprite: 'sprites.svg'
        }
      }
    }))
    .pipe(gulp.dest('dist'));
});

// webpack.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.svg$/,
      use: [{
        loader: 'svg-sprite-loader',
        options: { extract: true }
      }]
    }]
  },
  plugins: [new SpriteLoaderPlugin()]
};

<svg class="icon icon-home" aria-hidden="true">
  <use href="#icon-home"/>
</svg>

function Icon({ name, size = 24, className }) {
  return (
    <svg
      className={`icon ${className}`}
      width={size}
      height={size}
      aria-hidden="true"
    >
      <use href={`#icon-${name}`}/>
    </svg>
  );
}

// 사용 예시
<Icon name="home" size={20} className="nav-icon"/>

<template>
  <svg :class="['icon', className]" :width="size" :height="size">
    <use :href="`#icon-${name}`"/>
  </svg>
</template>

<script>
export default {
  props: {
    name: String,
    size: { type: Number, default: 24 },
    className: String
  }
}
</script>

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.icon-primary {
  fill: var(--color-primary);
}

.icon-lg {
  width: 32px;
  height: 32px;
}

:root {
  --icon-size: 24px;
  --icon-color: currentColor;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--icon-color);
}

.icon-lg { --icon-size: 32px; }
.icon-danger { --icon-color: #dc3545; }

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

<button>
  <svg class="icon" aria-hidden="true">
    <use href="#icon-settings"/>
  </svg>
  설정
</button>

<a href="/home">
  <svg class="icon" role="img" aria-label="홈">
    <title>홈</title>
    <use href="#icon-home"/>
  </svg>
</a>

<!-- 외부 스프라이트 캐시 -->
<link rel="preload" href="/sprites.svg" as="image" type="image/svg+xml">

// 스프라이트를 온디맨드로 로드
async function loadSprite() {
  const response = await fetch('/sprites.svg');
  const svg = await response.text();
  document.body.insertAdjacentHTML('afterbegin', svg);
}

/sprites
  /navigation-icons.svg
  /social-icons.svg
  /editor-icons.svg

/icons
  /navigation
    home.svg
    menu.svg
  /actions
    edit.svg
    delete.svg
  /social
    twitter.svg
    facebook.svg

<div class="icon-grid">
  <div class="icon-item">
    <svg><use href="#icon-home"/></svg>
    <span>home</span>
  </div>
  <!-- ... -->
</div>