アイコン形式の選択

現在のウェブ開発において、アイコンの実装方法は主に二つに分類されます。フォントベースのアイコンとSVGベクターアイコンです。

フォントアイコンは全体ライブラリをダウンロードする必要があり、表示上はテキストと同等に扱える利点がありますが、バンドルサイズが大きくカスタマイズ性に欠けるという問題があります。

一方でSVGアイコンは必要な要素のみを含むため軽量で、スタイル変更も容易です。外部ライブラリに依存せず、独自SVGも利用可能です。ただしテキストとの配置調整には注意が必要です。

本記事ではSVG形式を推奨し、具体的な活用方法を解説します。

主要アイコンリソース

• Material Symbols: Googleが提供する最新デザインシステム。複数のバリエーション（丸み、塗りつぶし等）をサポート
• Material Design Icons: 従来のMaterialデザインに基づく豊富なアイコンセット
• Iconfont: アリババグループ傘下の多彩なカラーアイコンを含むリポジトリ
• Iconify: 複数プラットフォームのアイコンを集約した統合プラットフォーム

Vue向けアイコンパッケージ導入

Vue環境で効率的にアイコンを利用するため、事前にレンダリングされたコンポーネント群を使用します:

# Material Symbols用パッケージインストール
npm install @iconify-prerendered/vue-material-symbols

# MDI用パッケージインストール
npm install @iconify-prerendered/vue-mdi

利用時は個別にインポートすることで、ビルド時のツリーシェイキングにより不要なコードを削減できます:

<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols'
</script>

<template>
  <IconWarningRounded />
</template>

命名規則は「Icon + アイコン名 + スタイル修飾子」の形式となります。

重要: 開発モードでは全アイコンが読み込まれるため初回起動が遅くなる場合がありますが、ビルド時には自動的に未使用部分が除去されます。

テキストとの組み合わせ表示

SVG要素はデフォルトでインラインブロックとして振る舞うため、Flexboxを活用して整列させます:

<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols'
</script>

<template>
  <div class="flex items-center space-x-2 text-red-600">
    <IconWarningRounded class="w-6 h-6" />
    <span class="text-lg font-bold">警告メッセージ</span>
  </div>
</template>

カスタムSVGの取り扱い

Adobe Illustratorなどで出力されたSVGファイルは、以下のように直接Vueコンポーネントとして利用できます:

<template>
  <svg viewBox="0 0 24 24" class="w-6 h-6" fill="none" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
  </svg>
</template>

色変更が必要な場合はCSSクラスまたは直接属性値を設定します:

<template>
  <svg viewBox="0 0 24 24" class="text-blue-500 hover:text-blue-700">
    <path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
  </svg>
</template>

実践例

これらの手法は実際にGithubStar.Proプロジェクトで採用されており、Vue 3とTailwind CSS、Iconify-Prerenderedの組み合わせによる実装となっています。詳細はGitHubリポジトリをご確認ください。