1

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

我的 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>

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

在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'中覆盖它但没有成功。

我错过了什么？

4

2 回答 2

1

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

如果要指定始终使用的自己的图标，则必须在安装期间配置 vuetify 配置的“值”选项。

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

// vuetify options:
{
  iconfont: 'mdiSvg',
  defaultAssets: false,
  values: {
    checkboxOn: mdiCheckboxMarked,
    checkboxOff: mdiCheckboxBlankOutline,
    checkboxIndeterminate: mdiCheckboxMarkedOutline,
  }
}
于 2021-05-21T13:15:18.483 回答
0

实际上问题是我的错误配置。就是这样

 vuetify: {
    icons: {
      iconfont: 'mdiSvg',
     }
  ...
}
于 2021-05-27T14:42:06.677 回答