Vue3实战笔记（02）--- 使用VUETIFY图标字体

---

前言

Vuetify 开箱即支持 4 种流行的图标字体库—— Material Design Icons，Material Icons，Font Awesome 4 和 Font Awesome 5。今天为项目安装喜欢的图标。

---

一、Material Design 图标

安装方式主要有两种,
通过MDI - CSS：

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

或者作为本地依赖：

pnpm add @mdi/font -D

在 src/plugins/vuetify.js中编辑使用图标：

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { createVuetify } from 'vuetify'

export default createVuetify({
  icons: {
    defaultSet: 'mdi', // This is already the default value - only for display purposes
  },
})

使用示例：

<template>
  <v-icon icon="mdi-home" />
</template>

二、Font Awesome

FA 5安装方式同理，
FA 5 - CSS：

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

pnpm：

pnpm add @fortawesome/fontawesome-free -D

在 src/plugins/vuetify.js中编辑使用图标：

import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files
import { createVuetify } from 'vuetify'
import { aliases, fa } from 'vuetify/iconsets/fa'

export default createVuetify({
  icons: {
    defaultSet: 'fa',
    aliases,
    sets: {
      fa,
    },
  },
})

使用示例：

<template>
  <v-icon icon="fas fa-home" />
</template>

三、混合方式使用

假设上两种方式都已经安装导入好了，想要两种图标同时使用，只需这样配置一下：

export default createVuetify({
  //图标
  icons: {
    defaultSet: 'mdi'
    // aliases,
    sets: {
      fa,
      mdi
    },
  },

混合使用的时候，默认图标可以不需要加前缀，非默认的需要加上前缀：

如上图，mdi:mdi-minus 就可以mdi-minus这样写，两种写法都是支持的，我推荐默认使用mdi图标，因为很多vueitfy的内置组件里面默认都是使用这个图标，如果默认使用其他图标，使用组件时候就要去修改图标了，挺麻烦的。

总结

图标就安装好了，愉快的玩耍吧。