0
votes

Module Nuxt Vuetify - Les icônes de composants personnalisés ne fonctionnent pas

Version du module @ nuxtjs / vuetify - 1.8.3 nuxt 2.9.2

Décrivez le bogue L'importation d'icônes de composants créés sur mesure est impossible. https://vuetifyjs.com/en/customization/icons#component-icons

Pour reproduire https://codesandbox.io/s/nuxtjs-vuetify-z42mm

Étapes pour reproduire le comportement: 1. Sur index.vue, il y a quelques icônes. L'icône créée personnalisée n'est pas affichée. Aucune erreur, aucun avertissement.

Comportement attendu Je m'attends à avoir accès à une icône personnalisée avec $ vuetify.icons.values.ionic mais ce composant n'a pas été créé dans l'objet $ vuetify.icons.

De plus, il n'est pas possible de changer la police vuetify de vuetify.options.js comme ceci:

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

Peut-être qu'ils sont liés ...

nuxt.js vuetify.js

0 commentaires

3 Réponses :

0
votes

Pour utiliser des icônes personnalisées: nuxt.config

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,
      }
    }
  }
}

et: plugins / vuetify.js

  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
        }
      }
    }
  },

0 commentaires

1
votes

J'ai eu le même problème et je l'ai résolu avec la réponse Minaro:

Ma configuration vuetify n'était pas dans un fichier séparé mais dans nuxt.config.js .
J'ai dû mettre "@ nuxtjs / vuetify" dans la liste buildModules à cause de l'option treeShake.
Mais alors mes icônes personnalisées n'étaient pas chargées / accessibles
J'ai également mis "@ nuxtjs / vuetify" dans la liste des modules

Mais maintenant, séparer la configuration vuetify résout le problème:

nuxt.config.js :

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

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

vuetify.js :

modules: ["@nuxtjs/vuetify"],

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

0 commentaires

0
votes

Cela a fonctionné pour moi:

Ajoutez le chemin des options dans la configuration de Nuxt Vuetify, par exemple, optionsPath: '~/plugins/vuetify.js' .
Ajoutez un fichier plugins/vuetify.js qui exporte les icônes, par exemple:

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

Les icônes définies seront désormais disponibles avec le préfixe $vuetify.icons , par exemple:

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

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

0 commentaires