【表示速度改善】Vuetifyで利用する分だけmaterialdesigniconsをインポート

nuxtのvuetifyでデフォルトでheadに以下が記載されていて、ページ表示速度が下がる。

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

利用する分だけインストールする方法

まず、デフォルトで出力されるmaterialdesigniconsを削除

    
  vuetify: {
  defaultAssets: {
      icons: false,
      font: false
    },
}

@mdi/jsをインストール

npm install @mdi/js -D

利用方法

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


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

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

参考

Icons — Vuetify