Vue.jsでFont Awesomeを使う

インストール

プロジェクトに移動してコマンドを打つ

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome

他に使いたいアイコンがあれば適宜追加する

• Regular

npm install --save @fortawesome/free-regular-svg-icons

• Light

npm install --save @fortawesome/pro-regular-svg-icons

• Brands

npm install --save @fortawesome/free-brands-svg-icons

使う

src/main.jsに以下のように記述する

src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";

/**
 * 追加
 */
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faChevronRight,
  faChevronLeft
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faChevronRight, faChevronLeft);

Vue.component("font-awesome-icon", FontAwesomeIcon);

/**
 * ここまで
 */

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

アイコン全部を追加したい時

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)

アイコンを表示させる

<span class="calender-header__prev">
  <font-awesome-icon icon="chevron-left"/>
</span>

でた☺️