# Icon Fonts

VuetifyはMaterial Design Icons、Material Icons、Font Awesome 4とFont Awesome 5をサポートしています。デフォルトでは、 Material Design Icons を使用します。

# 使い方

フォントライブラリを変更するには、インスタンス生成時に iconfont オプションを追加します。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

定義済みオプションを使用すると、選択されたプリセットに基づいてデフォルト値が事前に埋められます。これは、デフォルトの icon 値を持つコンポーネントのデフォルトを上書きします。詳細については、デフォルトのアイコンプリセット値を参照してください。

# アイコンフォントのインストール

指定したアイコンライブラリを含める必要があります (デフォルトの場合でも)。 CDNリンクを含めるか、アイコンライブラリをアプリケーションにインポートすることによって行うことができます。

このページでは、 “Material Icons” は official google icons を、“Material Design Icons” はサードパーティのライブラリを参照しています。

# Material Design Icons

下のツールを使用するとMaterial Design Iconsを検索でき、アイテムをクリックすることでクリップボードにコピーできます。

これはVuetifyのデフォルトのアイコンフォントです。 CDNでインクルードすることができます：

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

あるいは、ローカル依存としてインストールします：

$ yarn add @mdi/font -D
// あるいは
$ npm install @mdi/font -D

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

# Material Design Icons - JS SVG

SVG のパスは @mdi/js で指定したものを使用してください。これは、本番環境用にアプリケーションを最適化する際に推奨されるインストールです。デフォルトのアイコン以外にも使用する予定がある場合にのみ、これを含める必要があります。

$ yarn add @mdi/js -D
// あるいは
$ npm install @mdi/js -D

mdiSvg のアイコンフォントを指定します:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

使用するアイコンのみをカスタムインポートすることで、バンドルサイズを大幅に小さくすることが出来ます。

<!-- Vue Component -->

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

# Material Icons

インストールは上記と同じです。ビルドプロセスがないプロジェクトの場合は、CDN からアイコンをインポートすることをお勧めします。

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

また、yarn または npm を使用してローカルにインストールすることもできます。こちらは公式の Google リポジトリではないので、アップデートを受けられない可能性があることを覚えておいてください。

$ yarn add material-design-icons-iconfont -D
// または
$ npm install material-design-icons-iconfont -D

パッケージをインストールしたら、main entry jsファイルにインポートします。これは通常、src/フォルダ内にあるmain.js, index.js、またはapp.jsです。 SSR アプリケーションを使用している場合は、 client.js または entry-client.js ファイルがある可能性があります。

// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // css-loaderを使用していることを確認してください
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

# Font Awesome 4 Icons

同上。上cdn を使用して FontAwesome をインストールするのが最も簡単な方法です:

<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet">

FontAwesome 4 のインストールは、新しいバージョンと同じで、異なるリポジトリからインストールするだけです。 @fortawesome ではなく、 font-awesome リポジトリをターゲットにします。

$ yarn add font-awesome@4.7.0 -D
// あるいは
$ npm install font-awesome@4.7.0 -D

忘れてはいけないのは、あなたのプロジェクトはcssを認識する必要があるということです。 Webpackを使用している場合は、 css loaderをインストールしてセットアップしてください。

// src/plugins/vuetify.js

import 'font-awesome/css/font-awesome.min.css' // css-loader を使用していることを確認してください。
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa4',
  },
})

# Font Awesome 5 Icons

最も簡単にFontAwesome を使う方法は CDN を使用することです。メインの index.html の先頭に、次のスニペットを配置します:

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

お好みのパッケージマネージャーを使用して無料のバージョンの FontAwesome をローカルにインストールして呼び出すこともできます:

$ yarn add @fortawesome/fontawesome-free -D
// あるいは
$ npm install @fortawesome/fontawesome-free -D

メインエントリポイント内では、パッケージの all.css をインポートするだけです。設定済みの webpack プロジェクトを使用している場合は、webpack css loader を使用して .css ファイルのサポートを設定する必要があります。すでに Vue CLIを使用している場合は、これは自動的に行われます。

// src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css' // css-loader を使用していることを確認してください。
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
  },
})

# Font Awesome SVG Icons

必要な依存関係を追加します。

$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome/free-solid-svg-icons -D
// or
$ npm install @fortawesome/fontaesawesome-svg-core @fortawesome/vue-fontawesome-fontawesome-fontsawes @fortawesome/free-solid-svg-icons -D

そしてグローバルに font-awesome-icon コンポーネントを追加し、 faSvg を Vuetify の設定でiconfontとして設定します。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // コンポーネントをグローバルに登録
library.add(fas) // 必要なiconsを含めます

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
  },
})

# カスタムアイコンの使用

Let’s say your application calls for a custom icon in a Vuetify component. Instead of creating a wrapper component or manually defining the specific icon each time a component appears, you can configure it at a global level.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
    values: {
      cancel: 'fas fa-ban',
      menu: 'fas fa-ellipsis-v',
    },
  },
})

You can import and assign an svg to an icon value. The imported svg should contain only the path without the <svg> wrapper. For importing a more elaborate svg, use a component icon.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import myIconSvg from 'myIcon.svg'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa',
    values: {
      customIconSvg: myIconSvg,
      customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z',
    },
  },
})

If you are using a icon library that does not have a preset, you can create a custom one.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const MY_ICONS = {
  complete: '...',
  cancel: '...',
  close: '...',
  delete: '...', // delete (e.g. v-chip close)
  clear: '...',
  success: '...',
  info: '...',
  warning: '...',
  error: '...',
  prev: '...',
  next: '...',
  checkboxOn: '...',
  checkboxOff: '...',
  checkboxIndeterminate: '...',
  delimiter: '...', // for carousel
  sort: '...',
  expand: '...',
  menu: '...',
  subgroup: '...',
  dropdown: '...',
  radioOn: '...',
  radioOff: '...',
  edit: '...',
  ratingEmpty: '...',
  ratingFull: '...',
  ratingHalf: '...',
  loading: '...',
  first: '...',
  last: '...',
  unfold: '...',
  file: '...',
}

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    values: MY_ICONS,
  },
})

# 再利用可能なカスタムアイコン

Vuetify will automatically merge any icon strings provided into the pool of available presets. This allows you to create custom strings that can be utilized in your application by simply referencing the global icons.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default
    values: {
      product: 'mdi-dropbox',
      support: 'mdi-lifebuoy',
      steam: 'mdi-steam-box',
      pc: 'mdi-desktop-classic',
      xbox: 'mdi-xbox',
      playstation: 'mdi-playstation',
      switch: 'mdi-nintendo-switch',
    },
  },
})

This can help ensure your application is always using a specific icon given a provided string. Here are a few ways that you can use <v-icon> with this system.

<!-- Vue Component -->

<template>
  <div>
    <v-icon>$vuetify.icons.product</v-icon>
    <v-icon>$product</v-icon>

    <v-icon v-text="'$vuetify.icons.support'"></v-icon>
    <v-icon v-text="'$support'"></v-icon>

    <v-icon v-html="'$vuetify.icons.steam'"></v-icon>
    <v-icon v-html="'$steam'"></v-icon>

    <v-icon v-text="platform"></v-icon>
  </div>
</template>

<script>
  export default {
    data: () => ({
      user: {
        name: 'John Leider',
        platform: 'pc',
      },
    }),

    computed: {
      platform () {
        return '$' + this.user.platform
      }
    }
  }
</script>

# カスタムコンポーネント

You can utilize the same icon strings in your own custom components. Any time $vuetify.icons (or shortcut $) is passed in through v-text, v-html or as text, <v-icon> will look up that specified value. This allows you to create customized solutions that are easy to build and easy to manage.

<!-- Vue Component -->

<template>
  <div class="my-component">
    <v-icon v-text="icon"></v-icon>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: '$cancel'
      }
    }
  }
</script>

# Font Awesome Pro Icons

You can utilize component icons with Font Awesome Pro to select individual icon weights:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faBars } from '@fortawesome/pro-light-svg-icons'
import { faVuejs } from '@fortawesome/free-brands-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faBars, faVuejs)

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    values: {
      // set menu to light (default is solid)
      menu: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fal', 'bars'],
        },
      },
      // reusable custom icon
      vuejs: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fab', 'vuejs'],
        },
      },
    },
  },
})

# コンポーネントアイコン

指定されたアイコンフォントプリセットの代わりに、独自のコンポーネントアイコンを使用できます。また、Vuetifyコンポーネントで使用されているアイコンを独自のものに切り替えることもできます。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import IconComponent from './IconComponent.vue'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    values: {
      product: {
        component: IconComponent, // コンポーネントがグローバルに登録されている場合は、ここに文字列を使用できます。
        props: { // 必要に応じてコンポーネントにpropsを渡す
          name: 'product',
        },
      },
    },
  },
})

SVGアイコンに色を継承させ、正しくスケールさせたい場合は、以下のCSSを追加してください:

.your-svg-icon
  fill: currentColor

# 欠落しているMaterial Iconsの使用

いくつかのマテリアルアイコンはデフォルトで欠落しています。例えば、 person と person_outline は利用できますが、 visibility_outline は利用できません。一方、 visibility は利用できます。不足しているマテリアルアイコンを使用するには、以下のフォントを含めてください（すでに登録されている場合は別のマテリアルフォントを削除してください）。

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
/>

カスタムコンポーネントを追加できます。 @/components/MaterialIcon.vue であると仮定します。

<template>
  <i :class="standardClass">{{ parsed.id }}</i>
</template>

<script>
export default {
  props: {
    name: {
      type: String
    }
  },
  computed: {
    parsed() {
      const check = (customSuffixes, standardSuffix) => {
        for (let suffix of customSuffixes) {
          suffix = `_${suffix}`
          if (this.name.endsWith(suffix)) {
            return {
              suffix: standardSuffix,
              id: this.name.substring(0, this.name.indexOf(suffix))
            }
          }
        }
        return false
      }

      return (
        check(['fill', 'filled'], '') ||
        check(['outline', 'outlined'], 'outlined') ||
        check(['two-tone', 'two-toned'], 'two-tone') ||
        check(['round', 'rounded'], 'round') ||
        check(['sharp', 'sharpened'], 'sharp') || {
          suffix: '',
          id: this.name
        }
      )
    },
    standardClass() {
      if (this.parsed.suffix) {
        return `material-icons-${this.parsed.suffix}`
      }
      return 'material-icons'
    }
  }
}
</script>

つづいて、必要なMaterial iconsを正確に登録する必要があります。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import MaterialIcon from '@/components/MaterialIcon'

function missingMaterialIcons(ids) {
  const icons = {}
  for (const id of ids) {
    for (const suffix of ['fill', 'outline', 'two-tone', 'round', 'sharp']) {
      const name = `${id}_${suffix}`
      icons[name] = {
        component: MaterialIcon,
        props: {
          name
        }
      }
    }
  }
  return icons
}

Vue.use(Vuetify, {
  // iconfont: 'md',
  icons: {
    values: {
      ...missingMaterialIcons(['visibility', 'visibility_off'])
      // 'visibility_outline'や'visibility_off_round'などが有効になります。
    }
  }
})

そうすることで、このようにMaterial iconsを使用できます。

<!-- props として使用しています。 ダブルクォートとシングルクォートに注意してください。 -->
<v-text-field
    label="password"
    :append-icon="
      pwShow
        ? '$visibility_outline'
        : '$visibility_off_outline'
    "
    @click:append="pwShow = !pwShow"
    :type="pwShow ? 'text' : 'password'"
  />

<!-- アイコンコンポーネントとして直接使用 -->
<v-icon>$visibility_outline</v-icon>

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:09/17/2021, 9:17:47 AM