効率的にサイト作り！Buefyでアイコンを表示しよう！！

僕は今年二十歳の代なので、今日は成人式に行ってきます！

なので、今日は時間がないため少し短めの内容となっております。

タイトルの通り、Buefyでアイコンを表示していきます。

アイコンの表示は他にもVuefyで行うこともできます。そのやり方は僕が書いた記事え、アイコンでまだFontAwesome使ってるの？？？を参考にして頂くと分かりやすいかと。

また、Buefyなんて聞いたの初めてという方は、こちらの記事初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！を見ていただくと分かると思います！

それでは、Buefyを使ってアイコンを表示してみましょう！

パッケージのインストール

必要なパッケージをインストールします。

npm i buefy
npm i sass --save-dev
npm i sass-loader node-sass --save-dev
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/free-brands-svg-icons

sass-loaderのインストールに成功しない方はnpm i sass-loader@8.* --save-devとしてバージョン8.*を指定して見て下さい。

Buefyの設定

次にBuefyを使うための設定を行います。

src\assetsにbuefy.scssを作成して以下をコピペ。

src\assets\buefy.scss

@import '../../node_modules/bulma/sass/utilities/_all';
@import '../../node_modules/bulma';
@import '../../node_modules/buefy/src/scss/buefy';

そして、srcディレクトリのmain.jsにて今作成したscssファイルとFontAwesomeの設定を行います。

src\main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from "@fortawesome/free-brands-svg-icons"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
import Buefy from 'buefy'
import Vue from 'vue'
import './assets/buefy.scss'

Vue.config.productionTip = false

// ここから
library.add(fas, fab);
Vue.component('vue-fontawesome', FontAwesomeIcon);


Vue.use(Buefy, {
  defaultIconComponent: "vue-fontawesome",
  defaultIconPack: "fas",
  customIconPacks: {
    fas: {
      sizes: {
        default: "lg",
        "is-small": "1x",
        "is-medium": "2x",
        "is-large": "3x"
      },
      iconPrefix: ""
    }
  }
});
// ここまで

// 以下省略

これでBuefyでアイコンを楽々とアイコンを呼び出せます！

使いたいアイコンを決める

Fontawesomeの公式サイトから使いたいアイコンを検索して決めてください。

今回はTwitterアイコンを例にします。

b-iconタグで設定

使いたいアイコンを決めたら、<i class="fab fa-twitter"></i>このような欄があると思います。一番最初に、「fab」の部分をpackで指定します。

ただし、fasの場合はmain.jsの設定でデフォルトとして指定しているのでpack="fas"の記述は要りません

App.vue

<b-icon pack="fab"></b-icon>

次に、「fa-twitter」の部分をiconで設定し、適当にサイズを決めます

App.vue

<b-icon pack="fab" icon="twitter" size="medium"></b-icon>

めちゃ簡単♪

以上、「効率的にサイト作り！Buefyでアイコンを表示しよう！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading