# 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'
  },
})

Using a predefined option will pre-fill defaults based upon the selected preset. This will overwrite the defaults of components that have default icon values. 詳細については、デフォルトのアイコンプリセット値を参照してください。

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

指定したアイコンライブラリを含める必要があります (デフォルトの場合でも)。 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',
  },
})

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

例えば、アプリケーションがVuetifyコンポーネント内でカスタムアイコンを要求するとします。ラッパーコンポーネントを作成したり、コンポーネントが表示されるたびに特定のアイコンを手動で定義したりするのではなく、グローバルレベルで構成することができます。

// 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',
    },
  },
})

プリセットのないアイコンライブラリを使用している場合は、カスタムのライブラリを作成できます。

// 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は自動的に利用可能なプリセットのプールに提供されるアイコン文字列をマージします。これにより、 グローバルアイコンを参照するだけで、アプリケーションで使用できるカスタム文字列を作成できます。

// 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

Font Awesome Proでコンポーネントアイコンを利用して、個々のアイコンの重みを選択できます:

// 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'],
        },
      },
    },
  },
})

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

Instead of provided icon fonts presets you can use your own component icons. You also can switch icons that are used in Vuetify component with your own.

// 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, // you can use string here if component is registered globally
        props: { // pass props to your component if needed
          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を使用できます。

    label="password"
    :append-icon="
      pwShow
        ? '$visibility_outline'
        : '$visibility_off_outline'
    "
    @click:append="pwShow = !pwShow"
    :type="pwShow ? 'text' : 'password'"
  /><!-- アイコンコンポーネントとして直接使用 --><v-icon>$visibility_outline</v-icon>

準備はできましたか？

チームによって選択された関連コンテンツで学習を続けるか、下のナビゲーションリンクを使用してページ間を移動します。

← グローバル設定

国際化 (i18n) →

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

最終更新日:03/09/2021, 7:23:10 AM