【Vue.js】Vue.jsでfontawsome(Free版)を使用する方法

##【ゴール】
Vue.jsでfontawsomeを使用する。(Free版)
※Vue.jsバージョンは2.6.12です！！！

##【メリット】

■Vue.jsの理解度向上
■UI向上

##【環境】
mac catarina 10.156
Vue.js v2.6.12

##【実装】

####※node.js, vue.jsのインストールは割愛。ページ下に参考リンク貼っておきます🙇‍♂️

####兎にも角にも、「npm install」
アイコンのコード入れたら全部使えるよにします〜

mac.terminal

//ワークスペース作成
$ vue create fontawsome

// fontawsomeのパッケージ（無料版のみ）
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/vue-fontawesome@2  //ここだけバージョンによって異なります。

####インストールしたパッケージを読み込む

main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)

####使ってみる

app.js

<template>
  <div>
    <font-awsome-icon icon="お好きなアイコンのコード">
  </div>
</template>

####以上！！！

##【まとめ】

■ npm install
■「main.js」でパッケージを読み込む
■ < font-awsome-icon icon="お好きなアイコンのコード"> でviewに描画する

##【オススメ記事】

■公式ドキュメント
https://github.com/FortAwesome/vue-fontawesome

■ 【node.js】 node.jsインストール 芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b

■ 【HOMEBREW】 Mac OSのパッケージマネージャーについて node.jsやってたら学んだ事
https://qiita.com/tanaka-yu3/items/65dac47443cc08914a86