【HTML】アイコンフォントをピンポイントで使いたい(本番環境でCDN使いたくないしインストール面倒)→Bootstrap Iconsを使おう

アイコンフォントと言えば Font Awersome が定番ですが，本番環境でCDN使うのもイマイチだし，かと言ってインストールするのも面倒，そもそも大量に使うワケでもないし。ならば，Bootstrap Icons を使いましょう。

Bootstrap Icons

Bootstrap Icons はオープンソースのアイコンフォントを提供しています。

その特徴はアイコンをSVGで利用できることです。要するにCDNも使わず，インストールもせず，SVGのコードを直接 html に放り込んでしまおうというワケです。

試しにアイコンを探してみましょう。画面を下に移動するとアイコンの一覧が表示され，右上に検索ボックスがあります。「download」を入力すると

検索結果が表示されました。ここから download をクリックします。

右下の Copy HTML に SVG のコードが表示されています。コードの右上のボタンをクリックしてコードをコピーしましょう。

SVG コードを貼り付け

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>

あとはHTMLのコード上でアイコンを表示させたい部分にSVGのコードを張り付けるだけです。width="16" height="16"の値を変えればアイコンの大きさも変更できます。

Rails でこれを繰り返し用いる場合は，部分テンプレートに書いておけばコードの可読性を損なわずに利用できるでしょう。

欠点もあるがメリットは大きい

残念ながら font awesome に比べると使えるアイコンの数が少ないので，自分が使いたいアイコンが見つからないかもしれません。それでもピンポイントでアイコンを使う分には一般的に利用されるものが十分揃っているので，不満を感じることはあまり無いでしょう。SVGのコードを直に放り込むことで，rails の gem で font awesome 入れたけど反映されないけど何で？みたいな些細なトラブルから解放されるだけでも使う価値は十分あると思います。