今回達成すること

Vuetifyにカスタムアイコンを追加します。

Vuetifyのデフォルトアイコン

Vuetifyのデフォルトアイコンには、Material Design Iconsが使用されています。

設定次第ではFontAwesomeなどの他のアイコンを使用することも可能です。

VuetifyでFontAwesomeを使用する => Icon Fonts - Vuetify

ただ、特にアイコンにこだわりがなければ、Material Design Iconsで十分です。

そこで、Material Design Iconsに用意が無いアイコンをVuetifyに追加する設定を行います。

アイコンSVGファイルを用意する

追加するアイコンのSVGファイルを用意してください。

サンプルアイコンとしてMacOSのSVGアイコンを使用します。

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  viewBox="0 0 291.538 291.538"
>
  <path
    style="fill:#CCD0D2;"
    d="M188.373,44.308c10.97-11.744,18.39-28.049,16.359-44.308c-15.804,0.564-34.958,9.277-46.302,21.02c-10.169,10.396-19.072,27.011-16.696,42.951C159.369,65.164,177.385,56.033,188.373,44.308z M222.03,156.593c-0.337-36.451,28.859-53.958,30.152-54.804c-16.414-24.753-41.977-28.14-51.081-28.522c-21.767-2.285-42.442,13.182-53.493,13.182c-11.006,0-28.03-12.882-46.083-12.536c-23.733,0.391-45.601,14.211-57.79,36.114C19.081,154.09,37.416,219.363,61.44,255.104c11.744,17.497,25.727,37.125,44.089,36.415c17.725-0.71,24.407-11.789,45.792-11.789c21.394,0,27.384,11.789,46.101,11.434c19.045-0.355,31.098-17.834,42.742-35.386c13.473-20.292,19.027-39.938,19.345-40.93C259.1,214.611,222.421,200.182,222.03,156.593z"
  />
</svg>

引用: Apple Vector SVG Icon - SVG Repo

SVGアイコン用のVueファイルを用意する

Vuetifyに登録するカスタムアイコンは、.svgファイルを登録する方法もありますが、今回は、componentsディレクトリ以下の.vueファイルとして管理します。

componentsディレクトリ以下に、Svgディレクトリと、SvgIconMacOs.vueを作成します。

% mkdir components/Svg && touch $_/SvgIconMacOs.vue
% tree components

components
└── Svg
    └── SvgIconMacOs.vue

SVGアイコンを<template>タグで囲みます。

components/Svg/SvgIconMacOs.vue

<template>
  <!-- 追加したいiconコード -->
  <svg>
    ...
  </svg>
</template>

Vuetifyにカスタムアイコンを登録する

Vuetifyにカスタムアイコンを読み込ませる設定に入ります。

pluginsディレクトリにvuetify.tsを作成します。

% touch plugins/vuetify.ts

作成したvuetify.tsを編集します。

import構文はご自身のアイコン名とファイルパスに変更してください。

plugins/vuetify.ts

import Vuetify from 'vuetify/lib'
import MacOs from '~/components/Svg/SvgIconMacOs.vue'

export default new Vuetify({
  icons: {
    values: {
      // macOs: ここが呼び出しicon名となる
      macOs: {
        component: MacOs
      }
    }
  }
})

• icons.values.<icon名> ... values以下のプロパティ名がアイコンの名前となる。

Typeエラー 型宣言ファイルを作成する

Typeエラーが発生しました。

Cannot find module '~/components/Svg/SvgIconMacOs.vue' or 
its corresponding type declarations.

これは、import先のファイルに、型の宣言ファイルがない場合に発生します。

そこで、Svgディレクトリ直下に型の宣言ファイルを作成します。

% touch components/Svg/index.d.ts

カスタムアイコンVueファイルの型を宣言する

Svgディレクトリ以下に置かれた全ての.vueファイルをany型に宣言します。

components/Svg/index.d.ts

// Svgディレクトリ内の.vueファイルの型宣言
declare module '*.vue' {
  const value: any
  export default value
}

Nuxtにプラグインファイルを登録する

最後はnuxt.config.jsに作成したプラグインファイルを登録しましょう。

nuxt.config.js

export default {
  plugins: [
    // 追加
    '~/plugins/vuetify'
  ],
}

カスタムアイコンを呼び出してみよう

<template>タグ内から呼び出すには、２つの方法があります。

• $アイコン名 or
• $vuetify.icons.アイコン名

pages/index.vueから呼び出してみましょう。

pages/index.vue

<template>
      <!-- 追加 -->
      <v-icon>
        $macOs
      </v-icon>
      <v-icon>
        $vuetify.icons.macOs
      </v-icon>
    </v-container>
  </div>
</template>

OK。２つのMacアイコンが表示されました。

colorプロパティに対応させる

ただ今のままでは、colorプロパティに対応していません。

<!-- colorが反応しない -->
<v-icon
  color="red"
>
  $macOs
</v-icon>

そこで作成したSVGアイコンファイルSvgIconMacOs.vueを編集します。

<path style="fill: "の値をcurrentColorに書き換えてください。

components/Svg/SvgIconMacOs.vue

<path
  style="fill: currentColor;"
  ...
>

OK。色が反映しました。

その他、サイズプロパティにも対応しているので、色々遊んでみてください。

<v-icon
  x-large
  color="primary"
>
  $macOs
</v-icon>

今回の作業は以上です。

% git add -A
% git commit -m "Add vuetify custom icon"
% git push

次回は?

未定。囧rz 良いお年を。2021.12.28 @andou