vuetify & @mdi/js 缺少 V-Checkbox 图标。导入它的最佳方法是什么？

Question

我想知道如何正确使用 vuetify 组件，这些组件本身使用带有 @mdi/js 的图标。

我的 vuetify 配置如下所示：

vuetify: {
  iconfont: 'mdiSvg',
  defaultAssets: false,
  ...
}

只需导入图标并在 v-checkbox 中覆盖它们即可，但我不想对我使用的每个 v-checkbox 都这样做：

<template>
  <v-checkbox
    v-model="checkboxModel"
    :indeterminate-icon="mdiCheckboxMarkedOutline"
    :on-icon="mdiCheckboxMarked"
    :off-icon="mdiCheckboxBlankOutline"
    :label="Checkbox"
  ></v-checkbox>
</template>

<script>
import {
  mdiCheckboxBlankOutline,
  mdiCheckboxMarked,
  mdiCheckboxMarkedOutline,
} from '@mdi/js'

export default {
  data() {
    return {
      checkboxModel: false,
      mdiCheckboxBlankOutline,
      mdiCheckboxMarked,
      mdiCheckboxMarkedOutline,
    }
  },
}
</script>

另一种方法是覆盖 $checkboxOff SASS 变量。

在node_modules/vuetify/dist/vuetify.js中我找到了变量的声明。

  checkboxOff: 'M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z',

这个是图标的实际 svg 路径（只需将其粘贴到那里 https://yqnn.github.io/svg-path-editor/ 即可看到）。所以我试图在 'variable.scss' 中覆盖它，但没有成功。

我错过了什么？

Answer 1

https://vuetifyjs.com/en/features/icon-fonts/#using-custom-icons

如果你想指定你自己的应该一直使用的图标，你必须在安装期间配置你的 vuetify 配置的 'values' 选项。

import {
  mdiCheckboxBlankOutline,
  mdiCheckboxMarked,
  mdiCheckboxMarkedOutline,
} from '@mdi/js'

// vuetify options:
{
  iconfont: 'mdiSvg',
  defaultAssets: false,
  values: {
    checkboxOn: mdiCheckboxMarked,
    checkboxOff: mdiCheckboxBlankOutline,
    checkboxIndeterminate: mdiCheckboxMarkedOutline,
  }
}

Answer 2

其实问题是我的配置错误。就该这样

 vuetify: {
    icons: {
      iconfont: 'mdiSvg',
     }
  ...
}

vuetify & @mdi/js 缺少 V-Checkbox 图标。导入它的最佳方法是什么？

V-Checkbox icon missing with vuetify & @mdi/js. Whats the best way to import it?

vue.js

vuetify.js

material-design-icons