Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《簡単アイコンイメージ》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで簡単にアイコンを使用することができるFont awesomeについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 2.6.11
Nuxt.js: 2.12.2
nuxt-fontawesome: 0.4.0
fontawesome-svg-core: 1.2.30
vue-fontawesome: 0.1.10

Font awesomeの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。
移動後、以下のコマンドを実行します。

npm i nuxt-fontawesome
npm install –save @fortawesome/fontawesome-svg-core
npm install –save @fortawesome/vue-fontawesome

これで対象のプロジェクトに、ライブラリを追加することができました。次に実際のライブラリの使用方法について解説していきます。

nuxt.config.js設定

次に、nuxt.config.jsに設定を追加します。

export default {
  mode: 'universal',
  ・・・・・
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    [
      'nuxt-fontawesome'  ← 記載を追加
    ]
  ],
  // 下記記載を追加　開始
  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      }
    ]
  },
  // 終了
  ・・・・・
}

８行目、１２行目～１９行目：
Font awesomeライブラリの使用に必要な記載となります。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>Font awesomeプラグインサンプル</h1>
    </div>
    <div style="margin-top: 20px;">
      <font-awesome-icon icon="ad" style="font-size: 30px" />
      <font-awesome-icon icon="align-justify" style="font-size: 30px" />
      <font-awesome-icon icon="arrow-alt-circle-left" style="font-size: 30px" />
      <font-awesome-icon icon="balance-scale-right" style="font-size: 30px" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
<style>
.samaple__conntents {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

７行目～１０行目：
表示するアイコンの設定をしています。
「icon=”～”」の中身を変更することでアイコンを変えられます。

アイコンの一覧は、公式ページをご確認ください。