VuetifyにカスタムSVGアイコンを追加しよう
  • 2021.12.28に公開
  • 2021.12.31に更新
  • ブログ構築TS
  • 2. Vuetifyセットアップ
  • No.3 / 3

今回達成すること

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

2021-12-28 19-32-26

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>タグ内から呼び出すには、2つの方法があります。

  • $アイコン名 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。2つのMacアイコンが表示されました。

2021-12-28 19-25-28

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。色が反映しました。

2021-12-28 19-32-26

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

<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

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。