我遇到了与此处描述的相同的问题,即我的构建当前包含半兆字节的未使用图标。该答案中给出的解决方案对我不起作用(图标不显示),也许是因为我使用的是较新版本的 Vuetify。我遵循了该答案中给出的图标的安装@mdi/js
和使用,该答案还说
您只需将图标字符串传递给 SVG 路径元素,或者在这种情况下,如果您在 Vuetify 配置中指定图标字体,则可以将其直接传递给 v-icon:iconfont: 'mdiSvg'。
如果我在配置中尝试这样做,则会收到错误:
类型中不存在“iconfont”
const vuetify = createVuetify({
icons: {
iconfont: 'mdiSvg',
defaultSet: "mdi",
aliases,
sets: {
mdi,
fa,
},
},
components: {
VDatePicker,
},
directives,
})
我正在使用如下图标。如果我像我一直在做的那样包含完整的 MDI 集,mdi-bike
则会显示,但mdiMap
不会
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>
iconfont
是的, Vuetify 3 图标配置中没有属性。Vuetify 3 的文档显示了如何注册 SVG iconfont:
正如另一个答案中所解释的,这意味着您必须导入 Vuetify 未使用的所有图标: