Nuxt 3和Vuetify图标

Question

我试着让Vuetify 3和Nuxt 3一起工作。

我有一个Vuetify的插件：

// plugins/vuetify.ts
import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'
import {
    VApp,
    VAppBar,
    VAppBarNavIcon,
    VAppBarTitle,
    VBtn,
    VIcon
} from 'vuetify/components'

// Import everything
// import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        components: {
            VApp,
            VAppBar,
            VAppBarNavIcon,
            VAppBarTitle,
            VBtn,
            VIcon
        },
        theme: {
            defaultTheme: 'myCustomTheme',
            themes: {
                myCustomTheme: {
                    dark: false,
                    variables: {}, // ✅ this property is required to avoid Vuetify crash

                    colors: {
                        // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
                        background: '#fff',
                        surface: '#fff',
                        primary: '#38b6ff',
                        'primary-darken-1': '#3700B3',
                        secondary: '#03DAC5',
                        'secondary-darken-1': '#03DAC5',
                        error: '#CF6679',
                        info: '#2196F3',
                        success: '#4CAF50',
                        warning: '#FB8C00',
                    },
                }
            }
        }
    })
    nuxtApp.vueApp.use(vuetify)
})

我的nuxt.config.ts看起来是：

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        '@/assets/scss/main.scss',
    ],
    build: {
        transpile: ['vuetify']
    },
    vite: {
        define: {
            'process.env.DEBUG': 'false',
        }
    },
})

nuxt.config.ts的css部分从vuetify导入样式，但是图标不像预期的那样工作。我尝试使用VIcon和VAppBarNavIcon，两者都没有显示图标。

我尝试过从纱线中手动下载材料-设计图标-图标字体，然后将material-design-icons-iconfont/dist/material-design-icons.css添加到我的css中，但这不起作用。有人找到办法让这件事成功了吗？我想使用常规的mdi图标。

谢谢

Answer 1

安装材料设计图标

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

将此添加到您的插件/vuatefy.ts中：

import { createVuetify } from 'vuetify/lib'
import { aliases, mdi } from 'vuetify/lib/iconsets/mdi-svg'

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

现在，由于我们只想导入正在使用的图标，所以可以这样使用它：

<template>
  <v-icon :icon="mdiAccount" />
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      mdiAccount
    })
  }
</script>

Answer 2

vite为您提供了自动导入组件的能力，因此您不必具体说明要使用哪些组件，它会识别您正在使用的组件，并且只导入该组件。只需安装vite-。

对于你的问题:我有同样的问题，我也通过导入图标字体的CSS在我的vuetify插件。这是我的plugind/vuetify

import { createVuetify } from 'vuetify'

import { aliases, fa } from 'vuetify/iconsets/fa'
import {mdi} from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files
export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({ // Replaces new Vuetify(...)
        theme: {
            defaultTheme: 'dark'
        },
        icons: {
            defaultSet: 'fa',
            aliases,
            sets: {
                mdi,
                fa
            }
        },
    })

    nuxtApp.vueApp.use(vuetify)
})

我在这里也有一个更详细的描述：https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

Answer 3

然后

*npm i @mdi/font*在您的nuxt.config.ts中

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
})

你该走了