【保存版】Vue.jsでFontAwesomeを簡単に使う方法

5423 ワード
Vue.js FontAwesome Vue.js テキストリンク

はじめに

本記事へのアクセスありがとうございます。
投稿主はプログラミング初心者であり、この方法が「最適解」かは分かりません。
しかし、動作は検証済みです。

こんなやり方もできるんだ〜程度に見てもらえれば幸いです。

さっそくスタート

まずはVue.jsでFontAwesomeを使うにあたり、必要となる5つを先にダウンロードしていきます。
この記事ではyarnでダウンロードを記載していきますが、npmの方はnpmのダウンロード方法でお願いします。

yarn add --dev
@fortawesome/fontawesome-svg-core 
@fortawesome/free-brands-svg-icons　
@fortawesome/free-regular-svg-icons　
@fortawesome/free-solid-svg-icons　
@fortawesome/vue-fontawesome　

webpackのentry先であるjs（ここではmain.js)に下記のコードを追記します。

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fas, far, fab);
Vue.component('font-awesome-icon', FontAwesomeIcon);

FontAwesomeのホームページから使用したいアイコンを選択します。
今回は下記のアップルのアイコンを例として使いたいと思います。

<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
  />

このコードでアップルという文字の隣にアイコンを配置すること出来ます。
ポイントは:icon内の記載を上記画像の赤矢印のように書く事です。

また、下記のように font-awesome-iconタグにオプションとしてサイズや色を付け加えることもできます。

<div>
 <p>アップル</p>
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />

ボタンのアイコンとして使用したい場合は下記のようにすればOKです。

<div>
 <button @click="〇〇">
  <font-awesome-icon
    :icon="['fab', 'apple']"
　　 style="color: red"
    size="2x"
  />
 </button>

おわり

お疲れ様でした。これでVue.jsにおけるFontAwesome設定が完了です。

少しでも役に立ったと思う方がいましたらLGTMをお願いします🙇‍♂️