【webpack】vuetifyのアイコン(mdi)をローカルにインストールして使う方法

webpackにおいて、mdiアイコンをvuetifyのv-iconで使う場合に、CDNで使用する方法があるが、本番環境では外部依存をなくすためローカルで使用する必要がある。

ローカルにインストールするときにエラーが発生するなど手間取ったのでインストール方法をまとめておく。

vuetify公式 icons

パッケージのインストール

$ npm install @mdi/font -D

vuetify.jsの編集

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

・css-loaderがインストールしてあること。

エントリーポイントのファイルで上記src/plugins/vuetify.jsを読み込む。

エントリーポイントのファイル記述例

import Vue from "vue"
import App from "./components/App.vue"
import vuetify from "./plugins/vuetify.js"  //ここで読み込んでいる

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

webpack.config.jsの編集

これが重要。これを記述することでエラーがなくなった。
file-loaderを使って、指定した拡張子のファイルをjsで読み込めるようにしている。

webpack.config.js

  module: {
    rules: [
      省略
       {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=[name].[ext]'
    },
    ]
  },

file-loaderが未インストールの場合は下記を実行。

bash

$ npm install file-loader --save-dev

（参考）webpack file-loader

以上。

## (補足) 発生していたエラー unexpected characterということで、mdiパッケージのデータが正しく読み込めていない。

ERROR in ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot 1:1
Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

## (補足) CDNを利用する方法。 これは超簡単。CDNとして下記リンクを記述すればOK。

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