見出し画像

VuetifyでFont awesomeを使用してみた

Chiaki

Material Design Icons, Material Icons, Font Awesome 4 , Font Awesome 5

公式ドキュメントによると、上記4つがVuetifyでサポートされているとのことなので、Font Awesome5を導入して使用してみた

環境

  • MacBookPro M1 2020(OS Sonoma14.1.1)

  • Vuetify3.4.7

  • Node.js 17.9.1

  • Vue 3.2.0

  • yarn 1.22.19

  • TypeScript,Vue-Router導入


1,Font awesomeインストール

yarn add @fortawesome/fontawesome-free -D

// CDNの場合は以下をファイルに挿入
// <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">


2,src/plugins/vuetify.tsに以下追加


（TypeScriptを使用しない場合はsrc/plugins/vuetify.js）

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import { createVuetify } from "vuetify";
// 追加
import "font-awesome/css/font-awesome.min.css";
import { aliases, fa } from "vuetify/iconsets/fa4";

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: "#1867C0",
          secondary: "#5CBBF6",
        },
      },
    },
  },
  // 追加
  icons: {
    defaultSet: "fa",
    aliases,
    sets: {
      fa,
    },
  },
});


3,Font awesomeからデザインを選択、コードコピー

今回ハンバーガーメニュー実装のため、barsを選択
好みの色を選択、コードをコピー


4,ヘッダーにハンバーガーアイコンを追加

  <v-app-bar flat>
    <v-app-bar-title>
      <v-icon icon="fas fa-bars" style="color: #d24bc0" />
      //こちらの書き方でもOK
      //<v-icon style="color: #d24bc0">fas fa-bars</v-icon>
    </v-app-bar-title>
  </v-app-bar>


5,yarn devで起動、無事挿入を確認

以前VueでFont awesomeを導入したことがあったが、Vuetifyではなかったので勉強になった
ハンバーガーをCSSで1から作成すると結構大変だけど、挿入のみで簡単に実装できるのは楽〜！