概要

NuxtJS + Vuetifyベースのサイトの話です。

IconにLine Awesomeをつかいたかったので、その設定方法になります。

Vuetifyjs公式のカスタムアイコンの使用を参考にしました。

実装内容

install

yarn add line-awesome

coding

plugins/icons.js

• まずはpluginを作成します。
  • line-awesomeのcssを読み込みます
  • vuetifyの各コンポーネントで使っているデフォルトのiconを書き換えます

import 'line-awesome/dist/line-awesome/css/line-awesome.min.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'la',
    values: {
      complete: 'la-check',
      cancel: 'la-times-circle',
      close: 'la-times',
      delete: 'la-times-circle', // delete (e.g. v-chip close)
      clear: 'la-times',
      success: 'la-check-circle',
      info: 'la-info',
      warning: 'la-exclamation',
      error: 'la-exclamation-triangle',
      prev: 'la-chevron-left',
      next: 'la-chevron-right',
      checkboxOn: 'la-check-square',
      checkboxOff: 'la-stop',
      checkboxIndeterminate: 'la-minus-square',
      delimiter: 'la-circle', // for carousel
      sort: 'la-arrow-up',
      expand: 'la-chevron-down',
      menu: 'la-bars',
      subgroup: 'la-caret-down',
      dropdown: 'la-caret-down',
      radioOn: 'la-check-circle',
      radioOff: 'la-circle',
      edit: 'la-edit',
      ratingEmpty: 'lar la-star',
      ratingFull: 'las la-star',
      ratingHalf: 'la-star-half-alt',
      loading: 'la-sync',
      first: 'la-step-backward',
      last: 'la-step-forward',
      unfold: 'la-arrows-alt-v',
      file: 'la-file',
      plus: 'la-plus',
      minus: 'la-minus',
    },
  },
})

nuxt.config.js

• 作ったpluginを読み込ませます

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    { src: '~/plugins/icons' },  // この行を追加
  ],

使い方

• 以下のようにして使用できます。

<v-icon>la-bell</v-icon>

以上になります。