WebアプリのためのSVGアイコン作成ガイド：設計から本番まで

- 読み込み遅延（FOIT — テキストが見えなくなる現象）
- アンチエイリアシングの問題
- マルチカラー対応の制限
- アクセシビリティの課題
- HTTPリクエストのオーバーヘッド
- CSS依存

- 異なる密度用に複数バージョン（1x, 2x, 3x）
- ファイルサイズが大きい
- スタイルカスタマイズ不可
- 色の固定
- 複数のHTTPリクエスト

- 全サイズに1ファイル
- 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>