Значок V-Checkbox отсутствует в vuetify & @mdi/js. Как лучше всего его импортировать?

Question

Я хочу знать, как правильно использовать компоненты vuetify, которые сами используют значки с @ mdi / js.

Моя конфигурация vuetify выглядит так:

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

---

Просто импортирую значки и заменяю их в работе, но я не хочу делать это с каждым 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

На самом деле проблема была в моем неправильном конфиге. Вот как это должно быть

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

Answer 2

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,
  }
}