くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > FontAwesome5をNuxt+Buefy(Bulma)で使えるようにする

FontAwesome5をNuxt+Buefy(Bulma)で使えるようにする

Nuxt.js Bulma Buefy FontAwesome

以前の記事でvue-fontawesomeを使って、FontAwesome5を使えるようにしたけど、 nuxt-fontawesomeというもっと便利なのがあったので、試してみたときの備忘録。

便利だけでどデフォルトをFontAwesomeにしないといけないっぽい感じなので、併用していると難しいかも？

使い方

インストール

$ npm i -D nuxt-fontawesome @fortawesome/free-solid-svg-icons

# fabを使いたい場合、以下も追加
$ npm i -D @fortawesome/free-solid-svg-icons

nuxt.config.tsで設定

// nuxt-buefyよりあとに、nuxt-fontawesomeを追加
modules: [
  'nuxt-buefy',
  'nuxt-fontawesome'
],

// nuxt-buefyの設定で、
// materialDesignIconsをOFFにして、
// defaultIconPackとdefaultIconComponentを設定
buefy: {
  materialDesignIcons: false,
  defaultIconPack: 'fas',
  defaultIconComponent: 'font-awesome-icon'
},

// nuxt-fontawesomeの設定
// ここで、利用するiconを指定する
fontawesome: {
  imports: [
    // fasを全部使う場合
    {
      set: '@fortawesome/free-solid-svg-icons',
      icons: ['fas']
    },
    // faTwitterだけ使う場合、
    {
      set: "@fortawesome/free-brands-svg-icons",
      icons: ["faTwitter"]
    }
  ]
}

これで、nuxt-buefyのコンポーネントでFontAwesome5を使えるように！！
プラグイン作って初期化しなくていいし、nuxt.config.tsの設定だけでいいのは楽ちん(´ω｀)

以上!!

【PR】

これをつかって、こんなのつくりました！

air-money.netlify.app

参考にしたサイトさま