はじめに
Bootstrap Icons は、Bootstrap フレームワークで使用されるオープンソースのアイコンセットです。SVG ベースであり、ウェブアプリケーションやウェブサイトに簡単に統合できます。
SVGとは
SVG（Scalable Vector Graphics）は、XML ベースのベクター画像フォーマットです。解像度に依存しないため、どのサイズでも鮮明に表示されます。これにより、アイコンやグラフィックスが異なるデバイスや画面サイズで一貫して見えるようになります。
この記事では、Bootstrap Icons の導入から基本的な使い方、カスタマイズ方法まで実践的に解説していきます。
Bootstrap Icons の特徴
Bootstrap Icons には以下のような特徴があります。
SVGベースの利点
ビットマップ画像（PNG、JPGなど）と異なり、ベクター画像は拡大縮小しても画質が劣化しません。また、ファイルサイズも軽量で、ウェブサイトのパフォーマンスに優れています。
豊富なアイコン数
1,800種類以上のアイコンが用意されており、ビジネスアプリケーションから個人サイトまで幅広いニーズに対応できます。
カスタマイズの容易さ
CSSで簡単にサイズや色を変更できるため、デザインに合わせた調整が容易です。
ライセンス
MITライセンスで提供されているため、商用利用も無料で可能です。
導入方法
Bootstrap Icons を使い始めるには、いくつかの方法があります。プロジェクトの環境に応じて選択しましょう。
CDN経由での導入
最も手軽な方法です。HTMLの<head>タグ内に以下を追加するだけで使用できます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
npm/yarnでのインストール
Node.js環境でプロジェクトを管理している場合は、パッケージマネージャーを使ってインストールします。
# npmの場合
npm install bootstrap-icons
# yarnの場合
yarn add bootstrap-icons
インストール後、CSSファイルをインポートします。
import 'bootstrap-icons/font/bootstrap-icons.css';
手動ダウンロード
公式サイトからZIPファイルをダウンロードし、プロジェクトに配置する方法もあります。オフライン環境で作業する際に便利ですね。
基本的な使い方
Bootstrap Icons は主に2つの方法で使用できます。
iタグを使った方法
最もシンプルな方法です。<i>タグにクラスを指定するだけでアイコンが表示されます。
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-envelope"></i>
クラス名はbiとbi-{アイコン名}の2つを指定します。アイコン名は公式サイトで確認できます。
SVGとして直接埋め込む方法
より柔軟な制御が必要な場合は、SVGコードを直接埋め込むこともできます。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
この方法は、JavaScriptで動的にアイコンを操作したい場合に適しています。
カスタマイズ方法
Bootstrap Icons は CSS で簡単にカスタマイズできます。
サイズの変更
font-sizeプロパティでサイズを調整できます。
<i class="bi bi-heart" style="font-size: 2rem;"></i>
<i class="bi bi-heart" style="font-size: 3rem;"></i>
SVGの場合はwidthとheight属性を使用します。
<svg width="32" height="32" class="bi bi-heart" ...>
色の変更
colorプロパティで色を変更できます。
<i class="bi bi-heart" style="color: red;"></i>
<i class="bi bi-star" style="color: #ffd700;"></i>
SVGの場合はfill属性を使用します。
<svg fill="red" class="bi bi-heart" ...>
回転や反転
CSSのtransformプロパティで回転や反転も可能です。
<i class="bi bi-arrow-right" style="transform: rotate(90deg);"></i>
<i class="bi bi-arrow-right" style="transform: scaleX(-1);"></i>
実践例
実際のプロジェクトでよく使われるパターンを紹介します。
ボタンへの適用
<button class="btn btn-primary">
<i class="bi bi-download"></i> ダウンロード
</button>
<button class="btn btn-danger">
<i class="bi bi-trash"></i> 削除
</button>
ナビゲーションバーでの使用
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-house"></i> ホーム
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-person"></i> プロフィール
</a>
</li>
</ul>
</nav>
フォーム要素との組み合わせ
<div class="input-group">
<span class="input-group-text">
<i class="bi bi-search"></i>
</span>
<input type="text" class="form-control" placeholder="検索">
</div>
以下は実際の画面構成のイメージです。
まとめ
Bootstrap Icons は導入が簡単で、豊富なアイコンセットを提供しています。SVGベースのため、どのデバイスでも美しく表示され、CSSで柔軟にカスタマイズできる点が魅力ですね。
この記事で紹介した基本的な使い方をマスターすれば、より洗練されたUIを構築できるようになります。公式サイトには全アイコンのプレビューと検索機能があるので、プロジェクトに最適なアイコンを探してみてください。
次のステップとして、アニメーションを追加したり、JavaScriptと組み合わせて動的にアイコンを切り替えたりするなど、さらなる活用方法に挑戦してみましょう。