Question

模块版本 @ nuxtjs / vuetify-1.8.3 nuxt 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

我遇到了同样的问题，我用Minaro的响应解决了这个问题：

我的vuetify配置不在单独的文件中，而是在 nuxt.config.js 中。
由于treeShake选项的缘故，我不得不将“ @ nuxtjs / vuetify”放入 buildModules 列表中。
但是后来我的自定义图标无法加载/无法访问
我也将<@ nuxtjs / vuetify”放在了模块列表中

但是现在，分离vuetify配置可以解决问题：

nuxt.config.js ：

modules: ["@nuxtjs/vuetify"],

vuetify: {
   optionsPath: "./plugins/vuetify.js",
   customVariables: ["~/assets/css/variables.scss"],
   treeShake: true
}

vuetify.js ：

import MyCustomIcon from "~/components/MyCustomIcon.vue";

export default {
  theme: { ...},
  icons: {
    values: {
        myCustomIcon: {
            component: MyCustomIcon,
        },
    },
}

Answer 2

要使用自定义图标： 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,
      }
    }
  }
}

Answer 3

这对我有用：

在Nuxt Vuetify配置中添加选项路径，例如optionsPath: '~/plugins/vuetify.js'。
添加一个导出图标的plugins/vuetify.js文件，例如：

import SearchIcon from '~/components/icons/SearchIcon.vue'

export default {
  icons: {
    values: {
      search: {
        component: SearchIcon,
      }
    }
  }
}

已定义的图标现在将以$vuetify.icons前缀提供，例如：

<v-icon>$vuetify.icons.search</v-icon>

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

3 个答案: