Laravel 8 での Vue.js 3 を使った SPA に Bootstrap Icons を導入するためのメモ

なぜメモったか

Bootstrap Icons · Bootstrap 向けのオープンソース SVG アイコンライブラリのページを見ると、インストールと使い方は書いてあるものの、それだけでは足りず、調べなければうまく使うことができませんでした。

ですので、調べた内容を、走り書き程度ですが、メモいたします。

依存パッケージに追加。

npm i bootstrap-icons --save-dev

laravel/resources/js/bootstrap.js でインポートする。 import でも require でもどちらでも可能だった。 Bootstrap 5 を導入時点で require を使用していたので require を使った。

require("bootstrap-icons/font/bootstrap-icons.css");

適当な *.vue ファイルの <template> 部内に次を記述して、使えることを確認。

      <i
        class="bi bi-bootstrap-fill"
        alt="Bootstrap"
        style="font-size: 4rem; color: #7010f4"
      ></i>

公式のドキュメント通りに実践しても、うまくいかず、 import なり require なりすれば良いのだろうと検討はついても何を import すれば良いのか分からず、、、という悩みを解消することができました。

次のページのおかげです♪ありがとうございました!

以上です。