NuxtJSでBootstrapのアイコンを使うには？

NuxtJSでBootstrapのアイコンを使えるようにする手順を紹介します。

Bootstrap Iconsを使えるようにしよう

まずはBootstrap Iconsを使えるようにしていきます。

はじめにBootstrap Iconsをインストールします。

npm i bootstrap-icons

つづいて、すべてのページでアイコンを利用できるようにするためのプラグインを作成します。

NuxtJSプロジェクトのトップにpluginsディレクトリを作成し、bootstrap-vue-icon.jsというファイルを作成します。

作成したbootstrap-vue-icon.jsに以下のコードを追加します。

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

nuxt.config.jsを開き、作成したプラグインを読み込むようにします。

  plugins: [
    '@plugins/bootstrap-vue-icon.js'
  ],

これですべてのページでBootstrapVueのアイコンが利用できるようになります。

BootstrapVueを利用している場合は、b-icon-につづけてアイコンの名前を指定したタグを配置すると、アイコンを表示することができます。

例えばemoji-smileというアイコンを利用したい場合は、<b-icon-emoji-smile />とすればOKです。

<b-icon-emoji-smile></b-icon-emoji-smile>

もしくはb-iconで指定することもできます。

<b-icon icon="emoji-smile"></b-icon>

利用できるアイコンはBootstrap Iconsのホームページから調べることができます。

アイコンのサイズはstyleでフォントサイズを変更すると変えることができます。

<b-icon-emoji-smile style="font-size:1.5rem"></b-icon-emoji-smile>

同様に色を変えるにはcolorを変更すればOK。文字列の装飾と同じ要領でスタイリングできます。