Vuetify 自定义图标字体

Question

我想在我的应用程序中实现一些自定义图标，该应用程序也已经使用了 MDI 图标。 问题是，如果我使用带有为其创建的别名的自定义图标，相应的类中仍然会有一个 MDI 标记，这会导致破坏自定义图标，例如没有出现。

所以我尝试使用它作为默认图标字体，然后它工作正常，但不幸的是所有 MDI 图标都不会显示。

我的 MDI 图标声明如下：

icon="mdi-plus-circle"

如果我在控制台中查找它，就会发现该类：

class="mdi mdi-plus-circle"

自定义图标声明如下：

icon="$alias"

它仍然在类中使用 MDI 标记，就像上面提到的那样，但它不应该这样做。

有没有什么方便的方法可以最好地处理这两种情况，或者我做错了什么？

我尝试使用自定义

iconfont

作为默认字体。 我尝试了一些 hacky 方法，它使用

MutationObserver

并检查类中的所有 MDI 标签并删除不应该包含的标签，但在我看来这不是一个很好的解决方案。

Answer 1

它需要 Vuetify 插件的特定配置。

插件/vuetify.ts

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

import { createVuetify } from 'vuetify'

import customIcon1 from '@/assets/icon1.vue'
import customIcon2 from '@/assets/icon2.vue'

const aliasesCustom = {
  customIcon1,
  customIcon2
}

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases: aliasesCustom
  }
})

这里的自定义图标，例如

icon1.vue

，是一个 Vue 文件，只有一个用

<template></template>

包裹的 SVG

现在 MDI 和自定义图标可以使用了：

<v-icon icon="mdi-account" />
<v-icon icon="$customIcon1" />