【Vue3】で Font Awesome を使う

2021年3月31日

Vue3 で  Font Awesome が使いたかったけど日本語の記事があまりなかったので備忘録として書いておきます。

 Font Awesome インストール

まずはインストール。今回はyarn を使っていたので以下の様に。

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/vue-fontawesome

FontAwesome.vue としてコンポーネント作成

src 配下の components ディレクトリで以下の様に FontAwesome.vue 作成。

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :class="$props.class"
    :viewBox="`0 0 ${width} ${height}`"
  >
    <path fill="currentColor" :d="svgPath" />
  </svg>
</template>
 
<script>
import { defineComponent, computed } from "vue";
import { findIconDefinition } from "@fortawesome/fontawesome-svg-core";
 
export default defineComponent({
  name: "FontAwesome",
 
  props: {
    icon: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: "fas",
      required: false
    },
    class: String
  },
 
  setup(props) {
    const definition = computed(() =>
      findIconDefinition({
        prefix: props.type,
        iconName: props.icon
      })
    );
 
    const width = computed(() => definition.value.icon[0]);
    const height = computed(() => definition.value.icon[1]);
    const svgPath = computed(() => definition.value.icon[4]);
 
    return { width, height, svgPath };
  }
});
</script>

プラグインの設定

src 配下の plugins ディレクトリで以下の様に設定。

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import FontAwesome from "@/components/FontAwesome.vue";

library.add(fas);

export { FontAwesome };

fas 以外にも使いたいものがあればインストールして library に追加してください。

グローバルコンポーネントとして FontAwesome を追加

main.js に以下の様に追加してグローバルコンポーネントとして利用できる様にします。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { FontAwesome } from "@/plugins/font-awesome";

createApp(App)
.use(store)
.use(router)
.component("fa", FontAwesome)

使い方

コンポーネントとして登録しているので以下の様な感じで使えます。

<fa icon="search" class="searchIcon" @click="searchText"></fa>

参考書籍

まだ若干 3 の方は情報が少ない気もするので本を読んで体系的に勉強したいですが Vue 3 対応している日本語の本はこれくらいでしょうか。。？

下記は自分が読んだこともあるので紹介しておきます。

他にもいくつか参考にしたい Vue 関連の書籍も。