Início / coding / Perguntas / 77296449
Accepted
quilkin
Asked: 2023-10-15 19:34:44 +0800 CST

Adicione apenas os ícones necessários à compilação

  • 772

Estou com o mesmo problema descrito aqui , ou seja, minha compilação atualmente inclui meio megabyte de ícones não utilizados. A solução dada nessa resposta não funciona para mim (os ícones não aparecem), talvez porque esteja usando uma versão mais recente do Vuetify. Acompanhei a instalação @mdi/jse uso dos ícones fornecidos nessa resposta, que também diz

Você simplesmente passa a string do ícone para um elemento de caminho SVG ou, neste caso, pode passá-la diretamente para v-icon se especificar a fonte do ícone na configuração do Vuetify: iconfont: 'mdiSvg'.

Se eu tentar isso na minha configuração, recebo um erro:

'iconfont' não existe no tipo

const vuetify = createVuetify({
    icons: {
        iconfont: 'mdiSvg',
        defaultSet: "mdi",
        aliases,
        sets: {
          mdi,
          fa,
        },
      },
      components: {
        VDatePicker,
      },
    directives,
  })

Estou usando os ícones abaixo. Se eu incluir o conjunto MDI completo, como tenho feito, ele mdi-bikeaparece, mas mdiMapnão

  import { mdiMap } from '@mdi/js'
  ....
  ....
  <v-tab :value=Tabs.routes><v-icon :icon="mdiMap"></v-icon>All routes</v-tab>
  <v-tab :value=Tabs.newRide><v-icon>mdi-bike</v-icon>New Ride</v-tab>
vuetify.js

1 respostas

  1. Best Answer

    Sim, não há nenhuma iconfontpropriedade na configuração do ícone do Vuetify 3.

    A documentação do Vuetify 3 mostra como registrar a iconfont SVG:

    import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg' // <---- use SVG icons

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

    Conforme explicado na outra resposta, isso significa que você deve importar todos os ícones não utilizados pelo Vuetify:

    <script setup>
import { mdiAlertCircle } from '@mdi/js'
</script>
<template>
  <v-alert :icon="mdiAlertCircle" />
</template>
    • 1

relate perguntas