Vuetify Iconを@mdi/jsにして必要なアイコンのみをimportする

結果

Vuetifyのアイコンとして使っていた Material Design Icon Font の容量（198kb）分カット

https://gyazo.com/20b8e7e1945ab59fa863645c90140dd8 https://gyazo.com/954175e286a870cd37336bce65bf0289

左変更前：右変更後

Importの最適化

import '@mdi/font/css/materialdesignicons.css'

を使っていたため、使用していないアイコンまで取得していた

Icons — Vuetify.jsの通りに行い、必要なアイコンのみをインポートする

アイコン呼び出し元の変更は以下のようなコードでアイコンをインポートする。

importで必要なアイコンのみをインポートし、変数に代入し<v-icon>タグの中でその変数を使う

code:icon.ts

<v-icon> {{ icon.mdiStar }} </v-icon>

import { mdiStar } from "@mdi/js";

export default class ChampionDataTable extends Vue {

icon = { mdiStar };

}

参考