Я хочу использовать @mdi/js
в своем приложении Laravel 9 Vuetify 3. Документация Vuetify 3 говорит, что нужно делать. Но это не работает для меня.
Мой app.js
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(vuetify)
.mount(el);
},
});
Мой шаблон:
<script setup>
import { mdiAccount } from '@mdi/js'
</script>
<template>
<v-icon :icon = "mdiAccount"></v-icon>
</template>
Кажется, vuetify v-icon
не может обрабатывать графику SVG. У кого-нибудь есть идея, как я могу использовать @mdi/js
с v-icon
и другими выбросами vuetify?
В документации говорится, что вам нужно добавить несколько вещей в ваш вызов createVuetify
, чтобы значки svg работали.
Измените вызов следующим образом:
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
})
Те, кто умеет правильно читать документацию, имеют явное преимущество. -.- Большое спасибо