Vuetify使用本地图标资源

@vue/cli 4.2.3脚手架创建的Vuetify项目默认使用的是国外CDN上的Roboto和Material Design Icons资源,速度很慢甚至会加载失败,下面记录一下如何把这两个用本地资源代替

修改/public/index.html

删除下面两行引用

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

安装相应包

yarn add @mdi/font -D
# roboto字体其实不要也行,就英文的一套字体而已
yarn add typeface-roboto -D

修改plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import zhHans from 'vuetify/es5/locale/zh-Hans'   // 引入中文语言包
import 'typeface-roboto/index.css'    // 引入本地的Roboto字体资源
import '@mdi/font/css/materialdesignicons.css'  // 引入本地的Material Design Icons资源

Vue.use(Vuetify);

export default new Vuetify({
  lang:{
    locales: {zhHans},
    current: 'zhHans'
  },
  icons:{
    iconfont: 'mdi',	// 设置使用本地的icon资源
  }
});

模板中使用

<template>
  <div class="home">
    <v-icon>mdi-account-circle</v-icon>
  </div>
</template>

<script>

export default {
}
</script>

相关资源

完整的mdi图标对应代码可以在官网查看,代码都是mdi-xxx这样的格式:

https://cdn.materialdesignicons.com/4.9.95/

模板中调用应当是这样

<v-icon>mdi-account</v-icon>

更多实例

通过修改<v-icon>的标签属性可以修改图标大小,颜色

<template>
  <div class="home">
    <v-icon>mdi-account</v-icon>
    <v-icon large>mdi-account</v-icon>
    <v-icon x-large>mdi-account</v-icon>
    <v-icon size="120px">mdi-account</v-icon>
    <v-icon size="120px" color="#4fbf8d">mdi-account</v-icon>
  </div>
</template>

<script>

export default {
}
</script>