Nuxt Vuetify模块-自定义组件图标不起作用

Question

模块版本@ nuxtjs / vuetify-1.8.3nuxt 2.9.2

描述错误导入自定义创建的组件图标是不可能的。https://vuetifyjs.com/en/customization/icons#component-icons

要复制https://codesandbox.io/s/nuxtjs-vuetify-z42mm

重现该行为的步骤：1.在index.vue上，图标很少。自定义创建的图标不显示。没有错误，没有警告。

预期行为我希望可以使用$ vuetify.icons.values.ionic来访问自定义图标，但是该组件不是在$ vuetify.icons对象中创建的。

此外，也无法像这样从vuetify.options.js更改vuetify字体：

icons: {
  iconfont: 'fa4',
  values: {
    customIcon: customIconComponent
  }
}

也许他们有关系...

Answer 1

要使用自定义图标：nuxt.config

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    optionsPath: '~/plugins/vuetify.js',
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

和：plugins / vuetify.js

import Redux from '~/components/icons/redux.vue'
import ReduxSaga from '~/components/icons/redux-saga.vue'
import Jwt from '~/components/icons/jwt.vue'
import Express from '~/components/icons/express.vue'
import MongoDB from '~/components/icons/mongodb.vue'
import Sdl from '~/components/icons/sdl.vue'
import Webpack from '~/components/icons/webpack.vue'
import Yarn from '~/components/icons/yarn.vue'


export default {
  icons: {
    values: {
      redux: {
        component: Redux,
      },
      saga: {
        component: ReduxSaga,
      },
      jwt: {
        component: Jwt,
      },
      express: {
        component: Express,
      },
      mongodb: {
        component: MongoDB,
      },
      sdl: {
        component: Sdl,
      },
      webpack: {
        component: Webpack,
      },
      yarn: {
        component: Yarn,
      }
    }
  }
}